在cleanzone中的general.js中可以看到对jquery.datatable的调用:
/*Data Tables*/ var dataTables = function(params){ //Basic Instance $("#datatable).dataTable(); //Search input style $('.dataTables_filter input').addClass('form-control').attr('placeholder','Search'); $('.dataTables_length select').addClass('form-control'); };//End of dataTables
可以看到只是基本的调用,没有传递参数。
想要让第一列不可以排序,可能是笨的可以吧,足足折腾了一天,最后将上面的函数修改如下:
/*Data Tables*/ var dataTables = function(params){ //Basic Instance // $("#datatable).dataTable(); var orderable = null; //开启或关闭某列的排序,如果传过来的参数不是boolean类型,设置为可以排序 var targets = null; //具体哪一列 var aaSorting = null; //指定列的排序方式,jquery.dataTables插件中的第一列的默认值为正序排序 "aaSorting": [[0,'asc']], if(!(typeof(params) == "undefined")){ var columnDefs = params.columnDefs; if(!$.isEmptyObject(columnDefs)){ //设置列的属性是否为空 orderable =typeof (columnDefs.orderable)!="boolean"?true:columnDefs.orderable; targets = columnDefs.targets==""?null:columnDefs.targets; } aaSorting = $.isEmptyObject(params.aaSorting)==true?[[0,'asc']]:params.aaSorting; //判断是否传递了aaSorting值,未传递第一列将会显示默认的升序图标 } $('#datatable').dataTable( { aaSorting:aaSorting, "columnDefs": [ { "orderable": orderable, "targets": targets }] /*"columns": [ { "orderable": false }, { "orderable": false }, null, null, null ] */ } ); //"aaSorting" : [[0,""],[1, "asc"]] //默认的排序方式,第2列,升序排列 //"bSort":false //全部列都不排序 //Search input style $('.dataTables_filter input').addClass('form-control').attr('placeholder','Search'); $('.dataTables_length select').addClass('form-control'); };//End of dataTables
还修改了general.js的另外一个地方,只是传递了一下参数:
dataTables: function(paras){ dataTables(paras); },
在页面调用时:
$(document).ready(function(){ //initialize the javascript App.init(); //App.dataTables(); //App.dataTables({"columnDefs":{"orderable":false,"targets":[0,2]}}); App.dataTables({"aaSorting":[[0,""]],"columnDefs":{"orderable":false,"targets":[0,2]}}); });
由于在cleanzone模板中使用的jquery.datatable插件版本为1.9.4,而我在查资料的时候查到的设置方法都是1.10+的,拿着orderable属性去jquery.datatable1.9.4版本里搜索一圈,没有找到所以下载了一份儿1.10.7版本的。
在老版本中orderable对应的是bSortable,在1.10.x与1.9.x参数名对照表中找到的:
http://dt.thxopen.com/upgrade/1.10-convert.html
另外 Datatables中文网: http://dt.thxopen.com/index.html