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

 

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);
                }
            },