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

迈不过友情╰ 2021-09-20 02:42 805阅读 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 条评论，805人围观）

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

相关阅读

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

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

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

相关 Spring-Data-Jpa数据分页展示

> 写在前面：从2018年底开始学习SpringBoot，也用SpringBoot写过一些项目。现在对学习Springboot的一些知识总结记录一下。如果你也在学习Spring

短命女/ 2023年06月15日 11:26/ 0 赞/ 14 阅读

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

今天分享一下bootstraptable的相关技能点，由于第一次接触，所以刚开始碰了好多壁，于是趁现在过去不久，先总结总结。 Bootstraptable简单的来说就是一个表

拼搏现实的明天。/ 2023年02月14日 08:00/ 0 赞/ 28 阅读

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

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

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

相关分页展示图片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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