jquery.datatables使用

谁借莪１个温暖的怀抱￠ 2021-06-24 15:59 440阅读 0赞

1、DataTables错误： requested unknown parameter：

使用Datatables如果配置的column字段在后台返回的json数据中缺失，那么就会报requested unknown parameter的错误。比如：

在前端column中配置了四列：

{"title": "名称", 'data': 'name'},
    {"title": "短信平台用户名", 'data': 'username'},
    {"title": "信息", 'data': 'content'},
    {"title": "扩展号", 'data': 'ext'},

可是后台返回的json数据\[\{name:xxx,username:yyy,content:zzz\}\]没有ext字段。  
解决办法无外乎两种：  
1 后端返回数据补全  
2 前端设置默认值，使Datatables不会报错。  
因为后台使用了mybatis，返回的数据类型为map，mybatis自动把为null的数据隐藏了，所以导致缺少字段。又不容易修改。

所以采用第办法2：更改前端为：

{"title": "名称", 'data': 'name',"defaultContent": ""},
    {"title": "短信平台用户名", 'data': 'username',"defaultContent": ""},
    {"title": "信息", 'data': 'content',"defaultContent": ""},
    {"title": "扩展号", 'data': 'ext',"defaultContent": ""},

2、DataTables warning: table id=dataTableTest - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

在初始化datatables时加上：destroy: true, 此属性即可。

3、使用datatables插件：

1）引入：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

2）html：

<table id="dataTableTest" style="width: 98%;" class="table table-border table-bordered table-bg table-hover table-responsive">
    	<thead>
    		<tr class="text-c">
    			<th >rpage</th>
    			<th >刷新次数</th>
    			<th >时间</th>
    		</tr>
    	</thead>
    </table>

3）js：

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

发表评论取消回复

表情：

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

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

相关阅读

相关 SVN使用使用教程

SVN使用使用教程前言本人在公司孤儿式开发，是用不到svn这种工具的，但是怕突然某一天电脑坏掉，代码消失所以还是使用上代码管理工具。之前使用过svn工具，但

迈不过友情╰/ 2023年01月06日 11:55/ 0 赞/ 250 阅读

相关 vscode 使用使用快捷键添加注释（使用KoroFileHeader）

1.安装插件KoroFileHeader ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

痛定思痛。/ 2022年12月01日 03:41/ 0 赞/ 723 阅读

相关 Git使用及使用规范

![Center][] 例如注释有这样的一般情况下，提交 GIT 时的注释可以分成几类，可以用几个动词开始： Added

水深无声/ 2022年07月28日 11:43/ 0 赞/ 258 阅读

相关 idea使用svn(日常使用)

本文记录了svn的日常使用！！！非常详细！！！持续更新… 更新svn的项目到本地（一般是先更新再进行提交） ![在这里插入图片描述][watermark_type_

Dear 丶/ 2022年04月23日 03:46/ 0 赞/ 316 阅读

相关 VC中使用richtextbox使用

VC如果使用richedit控件，无法启动 \--------------------------------------------------------

太过爱你忘了你带给我的痛/ 2022年01月22日 03:57/ 0 赞/ 411 阅读

相关 Spring使用Rabbitmq (简单使用)

1、pom.xml jar包引用 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 1 <depende

我不是女神ヾ/ 2022年01月07日 08:11/ 0 赞/ 387 阅读

相关使用ContentPresenter，不使用ContentControl

参考： https://wpf.2000things.com/2017/04/06/1204-using-a-datatrigger-to-change-content-in-

女爷i/ 2021年12月01日 23:08/ 0 赞/ 413 阅读

相关【Git 使用】- Git 的基本使用

目录一、向本地仓库添加文件 1、创建本地仓库 2、添加文件二、修改文件内容并提交 1、修改文件内容 2、查看修改日志三、删除本地仓库文件 1、直接删除

我会带着你远行/ 2021年09月20日 21:50/ 0 赞/ 538 阅读

相关 RxJava使用（一）基本使用

[https://blog.csdn.net/tangxl2008008/article/details/51334122][https_blog.csdn.net_tangx

红太狼/ 2021年09月16日 01:46/ 0 赞/ 579 阅读

相关 VS 的使用使用行数

规范代码 1.代码整体右移将要右移的代码选中，按tab键 2.代码整体左移将要左移的代码选中，按shift+tab键显示行数 ![在这里插入图片

╰半夏微凉°/ 2021年08月29日 12:17/ 0 赞/ 680 阅读