datatable 分页查询

​​​​​​  jQuery DataTables插件自定义Ajax分页实现_klayer_cong的博客-CSDN博客https://blog.csdn.net/x6582026/article/details/74092037?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.no_search_link&spm=1001.2101.3001.4242参考大佬的这条博客解决分页查询

还有就是把数据全部查询回来在页面展示

 var oTable;
oTable = $('#example').DataTable({
             ajax:{
                 url:"/list",
                 dataSrc: 'rows',
                 data: function (d) {
                     var ct =  $("#selsctOption").serializeArray();
                     console.log(ct)
                     var obj = {
                        "deleteFlag":0
                     };
                     $.each(ct, function () {
                         if (obj[this.name] !== undefined) {
                             if (!obj[this.name].push) {
                                 obj[this.name] = [obj[this.name]];
                             }
                             if(this.value!=""){
                                 obj[this.name].push(this.value || "");
                             }
                         } else {
                             if(this.value!=""){
                                 obj[this.name] = this.value || "";
                            }
                         }
                     });
                     console.log(obj)
                     return $.extend( {}, d, obj );
                 }
             },
            columns: [
                {
                    data: "id",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<input type='checkbox' onclick='allSelect()' class='checkList' name='checkList' value='" + sData + "'>");
                    }
                },
                {data: "name"},
      
                {data: "startTime"},
                {data: "endTime"}
               
            ],
            // createdRow: function ( row, data, index ) {
            //     //行渲染回调,在这里可以对该行dom元素进行任何操作
            //     //给当前行加样式
            //     if (data.role) {
            //         $(row).addClass("info");
            //     }
            //     //给当前行某列加样式
            //     // $('td', row).eq(3).addClass(data.status?"text-success":"text-error");
            //     //不使用render，改用jquery文档操作呈现单元格
            //     // var $btnDel = $('\n' +
            //     //     '                                                <div class="fontColor">\n' +
            //     //     '                                                    <span>\n' +
            //     //     '                                                    <img src="/adminlte/dist/img/icon/deleteBluesvg.svg"\n' +
            //     //     '                                                         style="width: 15px;margin-right: 5px;" alt="">\n' +
            //     //     '                                                    <span>删除</span>\n' +
            //     //     '                                                    </span>\n' +
            //     //     '                                                    <span>\n' +
            //     //     '                                                    <img  src="/adminlte/dist/img/icon/page.svg" ' +
            //     //     '                                                       style="width: 20px;height: 18px;margin-right: 5px;" alt="">\n' +
            //     //     '                                                    <span>业务办理</span>\n' +
            //     //     '                                                </span>\n' +
            //     //     '                                                </div>');
            //     // $('td', row).eq(10).html("").append($btnDel);
            //     // var $checkbox = $('<input type="checkbox" name="cb-check-all" value=\"$(\'td\', row).eq(0)\">');
            //     // $('td', row).eq(0).html("").append($checkbox);
            // },
            paging: true,
            pageLength:10,
            lengthChange: false,/*添加每页个数按钮*/
            searching: false,
            ordering: false,
            info: true,
            autoWidth: false,
            responsive: false,
            pagingType: "full_numbers",  //显示尾页和首页
            language: {
                //"info": "当前第_PAGE_页，共 _PAGES_页",
                sInfo: "当前显示第 _START_ 到第 _END_ 条，共 _TOTAL_ 条",
                sInfoFiltered: "(从_MAX_条筛选 )",
                sInfoEmpty: "共筛选到0条",
                // "sSearch": "搜索:",
                sLengthMenu: "每页显示 _MENU_ 条",
                sZeroRecords: "未筛选到相关内容",
                paginate: {
                    sFirst: "首页",  //首页和尾页必须在pagingType设为full_numbers时才可以
                    sLast: "尾页",
                    sPrevious: "上一页",
                    sNext: "下一页",
                    first: "首页",
                    last: "尾页",
                    next: "下一页",
                    previous: "上一页"
                }
            }
        });

这是请求回来全部数据在展示在页面上

下面这个是吧ajax改成这个function就可以把全部数据分页查询

            "bServerSide":true,//开启服务端模式
          
            ajax: function (data, callback, settings) {
                console.log(data)
                //封装请求参数
                var param = {};
                param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;//开始的记录序号
                param.pageNum = data.start!=undefined&&data.length>0?(data.start / data.length)+1:1;//当前页码
                param.pageSize = 10;
                //console.log(param);
                //ajax请求数据
                $.ajax({
                    type: "GET",
                    url: "/detail/list",
                    cache: false,  //禁用缓存
                    data: param,  //传入组装的参数
                    dataType: "json",
                    success: function (result) {
                        console.log("result",result);
                        //setTimeout仅为测试延迟效果
                        setTimeout(function () {
                            //封装返回数据
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;//返回数据全部记录
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.rows;//返回的数据列表
                            //console.log(returnData);
                            //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }, 200);
                    }
                });
            },