使用jquery.DataTable.js 展示数据，并进行后台分页。

话不多说，直接上干货。。

要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。

1、使用jquery.DataTable展现数据。

var TableManaged = function () {

var initTable1 = function () {

var table = $('#sample_1');

var searchParams = {};

// begin first table

table.dataTable({



// Internationalisation. For more info refer to http://datatables.net/manual/i18n

"language": {

"aria": {

"sortAscending": ": activate to sort column ascending",

"sortDescending": ": activate to sort column descending"

},

"emptyTable": "No data available in table",

"info": "Showing _START_ to _END_ of _TOTAL_ records",

"infoEmpty": "No records found",

"infoFiltered": "(filtered1 from _MAX_ total records)",

"lengthMenu": "Show _MENU_ records",

"search": "Search:",

"zeroRecords": "No matching records found",

"paginate": {

"previous":"Prev",

"next": "Next",

"last": "Last",

"first": "First"

}

},



// Or you can use remote translation file

//"language": {

// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'

//},



// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout

// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables

/plugins/bootstrap/dataTables.bootstrap.js).

// So when dropdowns used the scrollable div should be removed.

//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

paging: true,

bFilter:false,

"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

"lengthMenu": [

[5, 15, 20,25,50],

[5, 15, 20,25,50] // change per page values here

],

// set the initial value

"pageLength": 20,

"serverSide" : true,// 服务器端分页处理

// //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力

"deferRender": true,

// "sAjaxDataProp" : "aData",//是服务器分页的标志，必须有

// "fnServerData": retrieveData,//分页回调函数

ajax: function (data, callback,

settings) {//ajax配置为function,手动调用异步查询

searchParams.pageSize = data.length;

searchParams.pageNum = data.start % data.length === 0 ?

                (data.start / data.length+1) :((data.start% data.length) +2);

console.log(requestUrl.baseUrl+requestUrl.queryAlarmInfoList)

$.ajax({

type: "GET",

url: requestUrl.baseUrl+requestUrl.queryAlarmInfoList,

cache: false, //禁用缓存

data: searchParams, //传入已封装的参数

dataType: "json",

success: function (res) {

data.pageNum +=1;

var lists = res.data;

//封装返回数据，这里仅演示了修改属性名

var returnData = {};

returnData.draw =data.draw;//这里直接自行返回了draw计数器,应该由后台返回

returnData.recordsTotal = lists.pages;

returnData.recordsFiltered = lists.total;//后台不实现过滤功能，每次查询均视作全部结果

returnData.data = lists.list;

//关闭遮罩

//$wrapper.spinModal(false);

//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染

//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕

if(searchParams){

$.extend(searchParams,searchParams);

}

callback(returnData);

},

error: function (

XMLHttpRequest,

textStatus,

errorThrown) {

Toast('查询失败','warning','danger');

}

});

},

columns:[

{"data":"createTime"},

{"data":"equipCode"},

{"data":"pointCode"},

{"data":"value"},

{"data":"ruleName"},

{"data":"windowStart"},

{"data":"windowEnd"},

{"data":"",

"class":"operation",

"render": function(data, type, row) {

return "<a target='_blank' class='map' windowStart='"+row.windowStart+"'

windowEnd='"+row.windowEnd+"' pointCode='"+row.pointCode+"' equipCode='"+row.equipCode+"'>趋势图</a>

<a ruleId = "+row.ruleId+" class='queryDetailInfo'>查看报警规则</a>";

}

}

],

"pagingType": "bootstrap_full_number",

"columnDefs": [{ // set default column settings

'orderable': false,

'targets': [0]

}, {

"searchable": false,

"targets": [0]

}],

"order": [

[1, "asc"]

] // set first column as a default sort by asc

});



}



return {



//main function to initiate the module

init: function () {

if (!jQuery().dataTable) {

return;

}



initTable1();

// initTable2();

// initTable3();

}



};



}();



paging：true //是否进行分页。

serverSide: false //是否从服务端进行分页。。true则进行后台分页。。false为前端分页。。如果要进行后端分页，则必须

columns：要展示的数据，必须跟后台字段名称一致。。。，如果第一列为checkbox很多同学，就不会，，在此说明一下。。

可以通过render追加样式，以及属性。。columns是表格thead里面，如果要给tbody里面的第一列指定checkbox，则要用到columnsDef属性。。可以对指定列设置是否可以对此列搜索，排序等等等。



columns:[

{"data":"createTime"},

{"data":"equipCode"},

{"data":"pointCode"},

{"data":"value"},

{"data":"ruleName"},

{"data":"windowStart"},

{"data":"windowEnd"},

{"data":"",

"class":"operation",

"render": function(data, type, row) {

return "<a target='_blank' class='map' windowStart='"+row.windowStart+"'

windowEnd='"+row.windowEnd+"' pointCode='"+row.pointCode+"' equipCode='"+row.equipCode+"'>趋势图</a>

<a ruleId = "+row.ruleId+" class='queryDetailInfo'>查看报警规则</a>";

}

}

],

"columnDefs": [{ // set default column settings

'orderable': false,

'targets': [0]

}, {

"searchable": false,

"targets": [0]

}],

以上基础框架搭建好以后，接着就是请求后台数据了。。

看上面的ajax属性。。。

**有几个重要字段，就是returnData里面的属性。。下面说明一下。。

很多人觉得对dataTable的使用没问题，但是数据就是展示不出来。。

1、draw属性，必须跟后台返回的draw一致。。。如果后台没给你，则使用data参数的draw属性。。

2、recordsTotal属性，告诉dataTable总页数

3、recordsFiltered属性，告诉dataTable总记录数。

4、data属性。。数据从哪个字段里面取。。

最重要的是，这些设置好了之后，如何传给dataTable
callback(returnData);
大家注意下最后一点：
我自己写的这个是jquery对象。。如果要使用dataTable对象属性的方法。。需要加上.api()方法。。**

就是里面的table.api();

如果改变了搜索内容，不想重新写ajax方法。。

可以使用table.api().ajax.reload()方法。。

另外，默认的搜索参数是dataTable里面的所有列，看起来很恶心。。

可以自定义搜索参数，每次传参用自定义的searchparams

希望对同学们有帮助哦！