datatables获取数据列表

datatables插件+ajax大大提高了页面的访问速度，我用的ThinkPHP框架做的数据处理，下面贴代码：

1.html文件

<table id="test" class="table table-striped table-bordered table-hover">
<thead>
<tr>

<th>标题</th>
<th>网页</th>
<th>创建时间</th> //这里和下面数据要对应，这有几个标签，下面就输出几个数据
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>

@H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@ @H_502_47@

2.jquery代码

var test = null;

$(document).ready(function () {

loadDisplayDataTable();

});

function loadDisplayDataTable()

{

tableObjRegion = $("#test").dataTable({

"language":{

"url":"datatable-zh.lang"

"processing": true,

"serverSide": true,

"autoWidth" : false,

"pagingType": "full_numbers",

"order": [[ 0,"desc" ]],

"sPaginationType": "",

"ajax": {

"url":"{:U('Test/loadDisplayDataTable')}",

"type":"POST",

"data":function(d) {

d.state = '0';

}

"columns":[

{"orderable": false,"name": "title","data": "title"},

{"orderable": false,"name": "descript","data": "descript"},"name": "utime","data": "utime"},

{
"orderable": false,
"data":function(data) {
return '<div class="action-buttons">' +
'<a class="btn btn-xs btn-info m-b-5" href="#update-page" data-toggle="modal" data-u_id="'+data.id+'"><i class="fa fa-edit"></i>编辑网页设置</a></br>'+
'<a class="btn btn-xs btn-info m-b-5" href="#update-model" data-toggle="modal" data-u_id="'+data.id+'"><i class="fa fa-edit"></i>编辑文章</a><br>' +
'<a class="btn btn-xs btn-danger" onclick=delete("'+data.id+'") href="#input-pwd-models" data-toggle="modal" data-obj_id="'+data.id+'"><i class="fa fa-trash"></i>  删除</a>' +
'</div>';
}

}

]

});

}

$('#update-data-model').on('show.bs.modal',function (event) {

var btn = $(event.relatedTarget);

var type = btn.data('state');

var u_id = btn.data('u_id');

$("input[name='u_id']").val(u_id);

var modal = $(this);

//加载当前id当前对象的数据

$.ajax({

"url" : "{:U('Test/update')}",

"data" : $("#updateModalForm").serialize(),

"type" : "post",

success : function (data) {

if(data && data.stat == 'success' && data.data) {

displayDataInForm(type,data.data);

} else {

myalert('数据加载失败!',null,2000);

}

error : function (data) {

myalert('系统故障!',2000);

}

});

$('#update-page').on('show.bs.modal',function (event) {

var btn = $(event.relatedTarget);

var type = btn.data('state');

var u_id = btn.data('u_id');

$("input[name='u_id']").val(u_id);

var modal = $(this);

//加载当前id对象的数据

$.ajax({

"url" : "{:U('Test/update')}",

success : function (data){

if(data && data.stat == 'success' && data.data){

displayDataInForm(type,data.data);

}else{

myalert('数据加载失败!',2000);

}

});

function displayDataInForm(type,data)

{

$("input[name='title']").val(data.title);

//此处修改为你数据库中的值

}

function updateData()

{

var u_type = $("input[name='u_type']").val();

$.ajax({

"url" : "{:U('ArticleData/updateArticleDataHandle')}",

"data" : $("#updateGeoDataModalForm").serialize(),

success : function (data) {

if(data && data.stat == 'ok') {

myalert('更新成功!',1500);

setTimeout("window.location.reload()",2000);

} else {

myalert('更新失败!',2000);

}

});

}

function updatePage() {

var u_type = $("input[name='u_type']").val();

$.ajax({

"url" : "{:U('Test/updateDataPages')}",

"data": $("#updateModalForm").serialize(),

"type": "post",

success : function (data) {

if(data && data.stat == 'ok'){

myalert('更新成功',2000);

}else{

myalert('更新失败!',

error : function (data) {

myalert('系统故障！',2000);

}

});

}

var delete= function (id)

{

if(confirm("你确定要删除此文章吗？")){

$.ajax({

"url" : "{:U('Test/deleteData')}",

"data" : "id="+id,

"type" : "post",

success : function (data) {

if(data && data.stat == 'ok') {

myalert('删除成功!',1500);

setTimeout("window.location.reload()",2000);

} else {

myalert('删除失败!',2000);

}

error : function (data) {

myalert('系统故障',2000);

}

});

}

3.Controller代码

class TestController extends Controller

{

//数据列表展示

public function listHandle($draw='0',$start='0',$length='20',$order=null,$columns=null,$search=null,$da_isdel="0")

{

$logic = D(" Test","Logic");

$where['da_lay_id'] = I('da_lay_id');

$where['da_type'] = 'AT';

$data = $logic->getMemberForPagelist($search["value"],$da_isdel,$where,$order,$columns,$start,$length);

if (isset($data)) {

$data["recordsTotal"] = $data['total'];

$data["draw"] = $draw;

$data["recordsTotal"] = isset($data) ? $data['total'] : 0;

$data["recordsFiltered"] = isset($data) ? $data['total'] : 0;

$data["start"] = $start;

$data["data"] = isset($data) ? $data['datas'] : Array();

} else {

$data = null;

}

$this->ajaxReturn($data,"JSON");

}

//数据添加

function add(){

$da_lay_id = I('lay_id');

$activitys = I('datas');

$pids = explode(',',trim(I('p_id'),'));

$obj = D(" Test","Logic");

$result = $obj->createHandle($da_lay_id,$activitys,$pids);

$this->ajaxReturn($result,'JSON');

}

//逻辑删除

public function deleteDetail(){

$da_id = I('da_id');

$obj = D("Test","Logic");

$data = $obj->deleteDetail($da_id);

$this->ajaxReturn($data,'JSON');

}

4.logic代码

class TestDataLogic extends Model

{

public function loadDisplayDataTable($key='',$type_flag='',$cur_click_region=0,$length='10')

{

$obj = D('Admin/ TestData');

$likeKey = array('title','pagetitle');

$logic = 'OR';

$order_default = 'utime';

$aliasSelf = '';

$aliasJoin = '';

$isdel = 0;

$where = array('isdel' => $isdel);

return Paging::pagingForNormal($obj,$likeKey,$key,$logic,$isdel,$order_default,$length);

}

public function addArticleinfo(){

$d['utime'] = date('Y-m-d H:i:s');

$d['state'] = 0;

$d['isdel'] = 0;

$d['at_open'] = 0;

$d['title'] = trim(I('title'));

return D('Admin/ TestData')->addData($d);

}

public function update($m)

{

$obj = D('Admin/ TestData');

$map['id'] = $m['u_id'];

return $obj->findData($map);

}

public function updataData($map,$d) {

$d['state'] = 0;

$d['utime'] = date('Y-m-d H:i:s');

return D('Admin/ TestData')->saveData($map,$d);

}

public function deleteData($map,$d)

{

$d['state'] = 1;

$d['isdel'] = 1;

return D('Admin/TestData')->saveData($map,$d);

}

6.Model层

class TestDataModel extends Model

{

protected $tableName = '数据表';

public function addData($d)

{

if($d && count($d) > 0) {

return $this->add($d);

} else {

return false;

}

public function selectData($map)

{

return $this->where($map)->select();

}

public function saveData($map,$d)

{

return $this->where($map)->save($d);

}

public function findData($m)

{

return $this->where($m)->find();

}

public function deleteData($map)

{

return $this->where($map)->delete();

}

public function selectDataofId($map)

{

return $this->field('id')->where($map)->select();

}

public function updateData($m,$d)

{

if($m && is_array($d) && count($d) > 0) {

return $this->where($m)->save($d);

} else {

return false;

}

原文链接：https://www.f2er.com/ajax/161980.html

datatables获取数据列表

猜你在找的Ajax相关文章