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

￡神魔★判官ぃ 2021-09-15 03:50 369阅读 0赞

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

要使用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

希望对同学们有帮助哦！

![20180402100810737][]

[20180402100810737]: /images/20210813/4a05c753e0c940b083700f983aafb9cf.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery中实现，datatable后台数据获取与前端分页展示

相关利用bootstraptable展示数据，对数据进行排序分页等操作

相关 java分页数据再次进行分页操作

相关分页展示图片

相关 jquery dataTable 后台加载数据并分页

相关使用Laypage进行分页

相关 SpringBoot重点详解--使用BootstrapTable进行分页展示

相关大小文件读取并分页展示

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

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