DataTable列自定义渲染切页无效重绘

最新推荐文章于 2021-11-23 15:58:42 发布

原创最新推荐文章于 2021-11-23 15:58:42 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #前端

Datatable 专栏收录该内容

1 篇文章

订阅专栏

在使用DataTable时遇到切页后列自定义渲染的rowCallback和footerCallback无效的问题，原因是fnDrawCallback在切换页面后仅执行一次。解决方法是在fnDrawCallback中加入`table.draw(false)`，用于在不重置状态的情况下重绘当前页。

DataTable列自定义渲染切页进行DataTable重绘

jsp代码

 table = $("#detail_table").DataTable({
            language: lang, //提示信息
            autoWidth: false, //禁用自动调整列宽
            "bLengthChange": true,
            "aLengthMenu": [[10, 25, 50, 1000000], [10, 25, 50, "ALL"]],
            stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: true, //隐藏加载提示,自行处理
            serverSide: true, //启用服务器端分页
            searching: false, //禁用原生搜索
            orderMulti: false, //启用多列排序
            scrollX: true,
            scrollY: true,
            scrollY: 350,
            autoWidth: true,
            "bStateSave":true,
            scrollCollapse: true,
            fixedColumns:   {
                leftColumns: 6
            },
            order: [], //取消默认排序查询,否则复选框一列会出现小箭头
            renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
            pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
            rowId: 'workSheetId',
            ordering: false,
            "destroy": true,
            //bAutoWidth: true,
            "dom": "<f<t>ilp>",
            columnDefs: [{
                "targets": 'nosort', //列的样式名
                "orderable": false, //包含上样式名‘nosort'的禁止排序
                "defaultContent": ""
            }],
            ajax: function (data, callback, settings) {
                showLoading();
                //封装请求参数
                var param = {};
                param.offset = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;//开始的记录序号
                param.pageNumber = data.start / data.length;//当前页码
                initParaVO(param);
                if (searchCount > 0){
                    saveSearchCondition();
                }
                var planStartTime= $("#planStartTime").val();
                var planEndTime= $("#planEndTime").val();
                var  posturl;
              
                    posturl="${ctx}<%=JobManageRestController.PATH%>/getWorkSheetAndProcedureList?token=" + userToken + "&userName=" + encodeURI(userName)+ "&dayjobStatus=" + encodeURI(DayjobStatus);
    
                //ajax请求数据
                $.ajax({
                    type: "POST",
                    url: posturl,
                    cache: false, //禁用缓存
                    data: JSON.stringify(param), //传入组装的参数
                    dataType: "json",
                    contentType: "application/json",
                    success: function (result) {
                        //setTimeout仅为测试延迟效果
                        setTimeout(function () {
                            hideLoading();
                            //封装返回数据
                            $(".checkall").prop("checked", false);//调ajax取消全选按钮
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.totalElements;//返回数据全部记录
                            returnData.recordsFiltered = result.totalElements;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.content;//返回的数据列表
                            //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }, 200);
                    }
                });
            },
            "fnDrawCallback": function () {
                var api = this.api();
                var startIndex = api.context[0]._iDisplayStart;        //获取到本页开始的条数 　
                api.column(1).nodes().each(function (cell, i) {
                    cell.innerHTML = startIndex + i + 1;
                });
                drawcount+=1;
                if(drawcount%2!=0){
                    table.draw(false);
                }
            },
            //列表表头字段
            columns: [
                {
                    data: null, "sClass": "dt-center", "bSortable": false, "width": "3%",
                    "title": '<input type="checkbox" class="checkall"/>',
                    "render": function (data, type, full, meta) {
                        if (data.jobcontentId != -1) {
                            return '<input type="checkbox" name="checkBox1" class="checkchild" value="' + data.procedureId + '" />';
                        } else {
                            return '<input type="checkbox" name="checkBox1" class="checkchild" disabled="disabled" value="' + data.procedureId + '"/>';
                        }
                    }
                },
                {data: null, "searchable": false, "orderable": false, "class": "", "width": "1%", "title": "序号"},
            
                {
                    data: null, "class": "", sWidth: "100px", "title": "联系电话",
                    "render": function (data, type, full, meta) {
                        return  getjobiphone(data.jobContentVo);
                    }
                },
                {
                    data: null, "class": "", sWidth: "5%", "title": "预约时间",
                    "render": function (data, type, full, meta) {
                        return  getjobgasSafetyAnalysisUnitContactDate(data.jobContentVo);
                    }
                }, 
            ],
            "rowCallback": function (row, data, index ) {
                getWorkCenterselect(data.jobContentVo);
                getunitsInvolvedselect(data.jobContentVo);
                setJoblistSeceltTypeValue(data.jobContentVo);
                setJoblistSeceltNoValue(data.jobContentVo);
            },
            "footerCallback": function (tfoot, data, start, end, display) {
                $(".setTime").datepicker({
                    language: "zh-CN",
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });
            }

        });

js代码

    var drawcount=0;

function getjobgasSafetyAnalysisUnitContactDate(jobContentVo){
    if(jobContentVo.gasSafetyAnalysisUnitContactDate!=null){
        return "<center>" +" <input type='text' value="+jobContentVo.gasSafetyAnalysisUnitContactDate+" class='form-control setTime' />"+"</center>";
    }else{
        return "<center>" +" <input type='text'   class='form-control setTime' />"+"</center>";
    }
}

以上例子 table中每个单元格皆为遍历渲染每行渲染后执行rowCallback给表单回显页脚渲染后执行footerCallback 给时间控件设置参数这样在表格第一次加载时是没有问题的，但是当点击切页按钮之后rowCallback和footerCallback 中的执行函数都无效了通过调试发现fnDrawCallback这个函数在第一次表格加载的时候进入了三次切换页面后就只进入了一次即表格没有被重绘调用

解决方案

在fnDrawCallback 加入 table.draw(false); 重绘表格

draw(true)：重置表格的初始状态，回到第一页，

draw(false)：只是重新加载当前页，且保持当前页码不变。

      "fnDrawCallback": function () {
                var api = this.api();
                var startIndex = api.context[0]._iDisplayStart;        //获取到本页开始的条数 　
                api.column(1).nodes().each(function (cell, i) {
                    cell.innerHTML = startIndex + i + 1;
                });
                drawcount+=1;
                if(drawcount%2!=0){
                    table.draw(false);
                }
            },