CMS之datatable插件使用心得

11 篇文章 0 订阅
6 篇文章 0 订阅

近期做了些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的类用作后台处理和返回数据,如有不足请各位批评指正。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值