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

迈不过友情╰ 2021-09-20 02:42 757阅读 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

希望对同学们有帮助哦！

发表评论取消回复

表情：

评论列表（有 0 条评论，757人围观）

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

相关阅读

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

*1、依赖的插件和包文件**  <link rel="stylesheet" type="t...

朴灿烈づ我的快乐病毒、/ 2024年04月17日 14:17/ 0 赞/ 60 阅读

相关 java后台处理数据分页问题

分页功能在项目中是非常重要的，使用分页功能能够极大的减轻服务器的压力，不用一次全部加载出所有数据，只需要加载出客户需要的数据信息使用分页辅助类来完成分页功能一是因为分

绝地灬酷狼/ 2022年11月22日 00:20/ 0 赞/ 196 阅读

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

前言分页数据操作以后再次分页 -------------------- 代码实现 PageHelper.startPage(page, pageSiz

￡神魔★判官ぃ/ 2022年11月04日 11:19/ 0 赞/ 278 阅读

相关分页展示图片

下面的是关于较为简单的图片进行分页展示。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

Love The Way You Lie/ 2022年09月27日 06:50/ 0 赞/ 196 阅读

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

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。引用 js文件 <scr

深藏阁楼爱情的钟/ 2022年07月13日 06:45/ 0 赞/ 243 阅读

相关使用Laypage进行分页

使用Laypage进行分页 Laypage是一款简单，方便的分页插件，无需写过多的js代码只需要向后台传入当前页数（由于本人偷懒在JS中写死了pageSize）

女爷i/ 2022年06月12日 05:21/ 0 赞/ 250 阅读

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

目录前端HTML页面后台Java辅助代码 Mongodb分页实现 Mybatis分页实现分页页面展示 -------------------- 前端

谁借莪１个温暖的怀抱￠/ 2022年04月02日 09:10/ 0 赞/ 384 阅读

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

1.读取小文件,并进行分页　　商品|价格　　飞机|1000 　　大炮|2000 　　迫击炮|1000 　　手枪|123

秒速五厘米/ 2021年12月12日 01:55/ 0 赞/ 303 阅读

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

话不多说，直接上干货。。要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。

迈不过友情╰/ 2021年09月20日 02:42/ 0 赞/ 758 阅读

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

话不多说，直接上干货。。要使用jquery.DataTable展现数据，比如引入jquery.js，jquery.DataTable.js，如果这个不会，建议从入门到放弃。

￡神魔★判官ぃ/ 2021年09月15日 03:50/ 0 赞/ 343 阅读