CMS之datatable插件使用心得

时间：2022-06-12 16:38:54

近期做了些CMS的功能模块，部分用到了datatable插件，记录一下使用中的心得。

在使用前引入datatable插件的js和css文件，这应该不用过多介绍了，接下来进入正题。

1.datatable的初始化，首先在页面写一个table就可以，包含一些列标题，给了table一个id，到时候用id初始化datatable。

<table class="display table table-bordered table-striped"  id="blogtable">
       <thead>
              <tr>
                  <th>列标题1</th>
                  <th>列标题2</th>
                  <th>列标题3</th> 
                  <th>列标题4</th>                 
                  <th>列标题5</th>
                  <th>列标题6</th>
                  <th>列标题7</th>               
              </tr>
        </thead>
</table>
2.js代码实例化datatable，datatable提供了很多初始化配置，我就以我自己所涉及到的来介绍 

var table=$("#blogtable").DataTable({
        order:[["5",'desc']],//列表按照第6列降序排序，升序使用asc，order:[[列的索引，排序类型]]，
        searching:true,//是否在datatable中加入搜索框
        page:false,
        info:true,
        processing: true,//显示加载动画
        serverSide: true,//开启服务器模式，即每次只从服务器中取出一页内容，用户有请求时再操作
        ajax:"<?php echo APP_URL_ROOT.'/controller/function'?>",//datatable获取数据调用的方法，我是php的即  控制器名/方法名
        columns:[//列定义，每一个{}对应一列的定义,由第一列开始
          {data:"BID",width: "10%"},
          {data:"BTITLE",width: "15%",render:function(data,type,row,meta) {//render可以在表格渲染时对某些列数据做处理，很便捷，过会会细说
            if (data.length>=15) {
              var res=data.substr( 0, 15 )+'...';
            }else{
              var res=data;
            }
             return '<span title="'+data+'">'+res+'</span>' ;
          }},
          {data:"UID",width: "5%"},
          {data:"BCONTENT",width: "40%",render:function(data,type,row,meta) {
          var dd=data.replace(/<\/?.+?>/g,""); 
          var dd2=data;
          return '<span title="'+dd2+'">'+dd.substr( 0, 50 )+'...</span>' ;
          }},
          {data:"BTIME",width: "10%"},
          {data:"BAD",width: "10%"},
          {data:null,width: "10%"}
        ],
        columnDefs:[{//对于特定列的定义
          targets:-1,
          data:null,//选中的特定列为data为null的列，即我这里的最后一列
          defaultContent:"<button class='btn btn-info btn-xs openblog col-md-3' type='button' title='预览'><i class='fa fa-eye'></i></button><button class='btn btn-danger btn-xs col-md-3 col-md-offset-3' type='button' id='del' title='删除'><i class='fa fa-trash-o'></i></button>",
        }//在这列我是加入了一些要用的小按钮，比如编辑呀、删除呀、修改呀等等的自己需要的功能，按需添加
        ]
      });

datatable初始化的render里面的方法，是对datatable渲染时对应列的一些更具体的操作，就举一个例子吧，如果从后台我们自己传给datatable的个别列数据的长度太长或者是带有html格式的文本内容，表格的个别列可能就会换行，导致个别行过宽，影响整体的美观，这时候你想对某些列的数据做一些处理时，就可以使用render，之后写出自己对于传入数据的处理方法即可。我这里就是取我需要的博客内容，可是博客内容一般很长，可能有些取出来就会让表格显示不美观，我就用了substr来截取部分内容，而把全部内容放入title中，由编辑操作的时候就可以通过去title来取得内容，而不用再一次的向后台请求需要编辑的数据。

最基础的先写到这里，之后会记录一些用php写的封装好的datatable的类用作后台处理和返回数据，如有不足请各位批评指正。

标签：

相关文章