DataTables - 问题集

Posted 2020-08-16 肉炒辣椒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DataTables - 问题集相关的知识，希望对你有一定的参考价值。

1.增加额外搜索条件

 1 var reqData = {}; 
 2 var extraSearch = [];
 3 var oTable = $(‘table selector‘).dataTable({
 4     ‘ajax‘：{
 5         data: function(aoData) {
 6             aoData.extraSearch = extraSearch;
 7             reqData[‘dtJson‘] = JSON.stringify(aoData);
 8             return reqData;
 9         }        
10     }
11 }）
12 
13 $("#searchBtn").click(function(){
14     extraSearch = [];
15     extraSearch.push({name:"keywords",value:$("#searchKeywords").val()});
16     oTable.api().ajax.reload();
17 }

2.增加末尾操作列之渲染

 1 <script id="tpl" type="text/x-handlebars-template">
 2     {{#each func}}
 3     <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
 4     {{/each}}
 5 </script>
 6 <script>
 7 var tpl = $("#tpl").html();
 8 var template = Handlebars.compile(tpl);
 9 $(‘table selector‘).dataTable({
10     ‘columns‘:[
11         { data: ‘id‘,title:"编码" },
12         { data: ‘name‘,title:"名称" },
13         { data: ‘createTime‘,title:"创建时间" },
14         { data: null ,title: "操作",‘render‘: function (data, type, row, meta) {
15             var context =
16             {
17                 func: [
18                     {"name": "修改", "fn": "edit(\‘" + row.id + "\‘,\‘"+row.name+"\‘,\‘"+row.createTime+"\‘)", "type": "primary"},
19                 ]
20             };
21             var html = template(context);
22             return html;
23         }}
24     ]   
25 })

3.扩展之buttons

4.去除默认第一列排序