DataTable实现纯前端分页(后端一次返回所有数据)

谁借莪１个温暖的怀抱￠ 2023-06-22 06:24 26阅读 0赞

页面代码:

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">
    <script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>

<div class="box-body">
                        <table id="example2" class="table table-bordered table-hover">
                            <thead>
                            <tr role="row">
                                <th>列1</th>
                                <th>列2</th>
                                <th>列3</th>
                                <th>列4</th>
                                <th>列5</th>
                                <th>列6</th>
                            </tr>
                            </thead>
                            <tbody class="tdoby_student_data">
     
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div>
                </div>

Datatable代码

<script>
        var table;
     
        $(function () { 
            //提示信息
            $.fn.dataTable.ext.errMode = 'none';
     
            var lang = { 
                "sProcessing": "处理中...",
                "sLengthMenu": "每页 _MENU_ 项",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
                "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": { 
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页",
                    "sJump": "跳转"
                },
                "oAria": { 
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            };
     
            //初始化表格
            table = $("#example2").dataTable({ 
                    language: lang, //提示信息
                    autoWidth: false, //禁用自动调整列宽
                    stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
                    processing: true, //隐藏加载提示,自行处理
                    serverSide: false, //启用服务器端分页
                    searching: false, //禁用原生搜索
                    orderMulti: false, //启用多列排序
                    order: [], //取消默认排序查询,否则复选框一列会出现小箭头
                    renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
                    pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
                    columnDefs: [{ 
                        "targets": 'nosort', //列的样式名
                        "orderable": false //包含上样式名‘nosort'的禁止排序
                    }],
                    // 主要是这一块实现分页展示后端返回的数据
                    ajax: function (data, callback, settings) { 
                        console.log(data);
                        //ajax请求数据
                        $.ajax({ 
                            type: "GET",
                            url: "${base}/user/getAll",
                            cache: false, //禁用缓存
                            data: { }, //传入组装的参数
                            dataType: "json",
                            success: function (result) { // result可以造点假数据测试
                                var returnData = { };
                                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                //返回数据全部记录
                                returnData.recordsTotal = result.length;
                                //后台不实现过滤功能，每次查询均视作全部结果
                                returnData.recordsFiltered = result.length;
                               //data: {draw: 2, order: Array(1), start: 0, length: 20, search: {…}, …}
                               // start 首行展示数据(会根据分页自动改变),length每页展示多少行
                               //当前页展示的数据列表(将数据截取展示)
                                returnData.data = result.slice(data.start,data.start+data.length);
                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(returnData);
                            }
                        });
                    },
                    "columns": [   
                        //跟你要显示的字段是一一对应的。我这里只显示八列
                        { 'data': 'username'},
                        { 'data': 'realName'},
                        { 'data': 'sex'},
                        { 'data': 'age'},
                        { 'data': 'address'},
                        { 'data': 'grade'},
                        { 'data': 'headImage'},
                        { 
                            "data": "谨慎操作",
                            render: function (data, type, full) { 
                                //可对数据进行处理，再显示
                            }
                        },
                    ]，
                    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull)            {                     //列样式处理
                    }
                })
                .api();
            //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
        });
    </script>

## 主要看ajax的代码，这块代码实现了纯前端分页功能，希望可以帮助到您 ##

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 Java 实现后端分页

背景说明在实际开发中，基于数据库表结构进行SQL查询，如果要对结果进行分页，可以借助一些工具类，如：基于Mybatis的工具类 PageHelper。但是，有时分

向右看齐/ 2024年03月23日 18:48/ 0 赞/ 132 阅读

相关后端API一次返回10万条数据，前端如何处理

后端API一次返回10万条数据，前端如何处理直接渲染（不可取）通过 setTimeout 进行分页渲染每个页面有条数`limit`限制，数据可以

男娘i/ 2024年03月22日 17:25/ 0 赞/ 59 阅读

相关 DataTable实现纯前端分页(后端一次返回所有数据)

页面代码: <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <l

谁借莪１个温暖的怀抱￠/ 2023年06月22日 06:24/ 0 赞/ 27 阅读

相关 elementui分页功能（当后端将所有数据全部返回，由前端处理）

情景浮现：后端没有给分页，一股脑全把数据给前端，比如请求过来有1941条信息，那么我们就应该在页面显示有多少页数据，多少条。以下为个人写的方法，可能方法有点蠢，不影响功能的

柔光的暖阳◎/ 2022年12月30日 10:51/ 0 赞/ 108 阅读

相关 easyUI 分页前端分页与后端分页

前端分页初始化datagrid时加上Filter $('tabL'+currentCatalogId).datagrid({ loadFilter: pa

心已赠人/ 2022年05月19日 06:07/ 0 赞/ 432 阅读

相关【DataTable】关于实现DataTable后端分页过程中的一些问题总结

【DataTable】关于实现DataTable后端分页过程中的一些问题总结 2018年06月21日 12:01:25 [Crayoncxy][] 阅读数：2376 版

刺骨的言语ヽ痛彻心扉/ 2022年03月22日 15:14/ 0 赞/ 1036 阅读

相关 datatables实现分页

datatables实现分页分为客户端分页和服务端分页两种，客户端分页很简单，只要把返回的所有数据根据dataSrc设置好就可以了。这里说一下服务端分页的实现。 html

柔光的暖阳◎/ 2022年01月30日 22:37/ 0 赞/ 542 阅读

相关 datatable前端传递参数与后端返回值格式说明

一.datatable前端传递参数其中，draw是请求的序号，start是数据的起始，length是需要返回的最大数据条数。search\[value\]是查找的值。服务端

超、凢脫俗/ 2021年09月15日 18:50/ 0 赞/ 1180 阅读

相关 datatable组件后端分页

官网： [https://datatables.net/][https_datatables.net] [https://datatables.club/][https_d

系统管理员/ 2021年05月12日 11:55/ 0 赞/ 604 阅读