• jQuery DataTables 问题:Cannot reinitialise DataTable


    解决:  destroy: true,   

    var tabel = $('#userlist').DataTable({
            destroy: true,                    //加上此属性即可
            bProcessing: true,           //DataTables载入数据时,是否显示‘进度’提示  
            bStateSave: false,          //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
            aLengthMenu: [10, 20, 40, 60, 100, 1000], //更改显示记录数选项  
            iDisplayLength: 10,        //默认显示的记录数  
            bInfo: true,              //是否显示页脚信息,DataTables插件左下角显示记录数  
            bPaginate: true,         //是否显示(应用)分页器  
            autoWidth: true,        //是否自适应宽度  
            bScrollCollapse: true, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变  
            sPaginationType: "full_numbers", //详细分页组,可以支持直接跳转到某页  
            bSort: false,        //是否启动各个字段的排序功能  
            bFilter: true,      //是否启动过滤、搜索功能        
            bServerSide: true, //开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
            "ajax": {
                url: "/Ajax/UserMgrAjax.ashx?cmd=userList",
                type: "POST"

            },
            columns: [
                {
                    "sWidth": "4%",
                    "sClass": "text-center",
                    "data": null,
                    "targets": 0
                },
                 {
                     "sWidth": "4%",
                     "sClass": "text-center",
                     "data": "u_id",
                     "render": function (data, type, full, meta) {//这里就是要显示的checkbox多选框了
                      
                         return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                     },
                     "bSortable": false
                 },

                  { "sClass": "text-center", "data": "u_name" },
                 { "sClass": "text-center", "data": "u_tel" },
                 {
                     "sClass": "text-center",
                     "data": "u_sex",
                     "render": function (data, type, row, meta) {

                         var content = "保密";
                         if (data == "1")
                             content = "男";
                         if (data == "2")
                             content = "女";
                         return content;
                     }

                 },
                 { "sClass": "text-center", "data": "u_age" },
                 { "sClass": "text-center", "data": "u_registerdate" },
                 {
                     "sClass": "text-center",
                     "data": "u_state",
                     "render": function (data, type, row, meta) {
                         var content = "非正常";
                         if (data == "0")
                             content = "正常";
                         if (data == "1")
                             content = "锁定";
                         return content;
                     }
                 },
                 {
                     "sClass": "text-center",
                     "data": "u_registerdate",
                     render: function (data, type, row, meta) {
                         
                         return "<a id='edit' title='编辑' class='glyphicon glyphicon-edit nounderline' href='javascript:Edit("+row.u_id+");'></a>";
                     }
                 }

            ],
            //这个应该是重绘的回调函数
            fnDrawCallback: function () {
                var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
                this.api().column(0).nodes().each(function (cell, i) {
                    //翻页序号连续
                    cell.innerHTML = startIndex + i + 1;

                });
            },
        });

  • 相关阅读:
    哇,博客开通啦
    前端与后端数据交互的方式之ajax
    apply()方法和call()方法
    元素居中的方法
    JS中兼容问题的汇总
    关于元素尺寸问题的汇总
    小案例之随机点名系统
    圣杯布局与双飞翼布局
    js自动分页加载所有数据
    浏览器工作流程
  • 原文地址:https://www.cnblogs.com/weimingxin/p/8250587.html
Copyright © 2020-2023  润新知