DataTables - 问题集

时间:2024-09-15 11:34:38

1.增加额外搜索条件

 var reqData = {};
var extraSearch = [];
var oTable = $('table selector').dataTable({
'ajax':{
data: function(aoData) {
aoData.extraSearch = extraSearch;
reqData['dtJson'] = JSON.stringify(aoData);
return reqData;
}
}
}) $("#searchBtn").click(function(){
extraSearch = [];
extraSearch.push({name:"keywords",value:$("#searchKeywords").val()});
oTable.api().ajax.reload();
}

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

 <script id="tpl" type="text/x-handlebars-template">
{{#each func}}
<button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
{{/each}}
</script>
<script>
var tpl = $("#tpl").html();
var template = Handlebars.compile(tpl);
$('table selector').dataTable({
'columns':[
{ data: 'id',title:"编码" },
{ data: 'name',title:"名称" },
{ data: 'createTime',title:"创建时间" },
{ data: null ,title: "操作",'render': function (data, type, row, meta) {
var context =
{
func: [
{"name": "修改", "fn": "edit(\'" + row.id + "\',\'"+row.name+"\',\'"+row.createTime+"\')", "type": "primary"},
]
};
var html = template(context);
return html;
}}
]
})

3.扩展之buttons

4.初始化设置排序无效

关闭stateSave即可。 'stateSave' : false

相关链接:

1.渲染:http://datatables.club/reference/option/columns.render.html