cleanzone模板-表格插件jquery.datatables

在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

转载于:https://my.oschina.net/u/1416998/blog/475217