cleanzone 템플릿 - 표 플러그인 jquery.datatables

2951 단어 cleanzone
cleanzone에 있는general.js에서 jquery를 볼 수 있습니다.데이터 테이블 호출:
/*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 때문에.데이터테이블 플러그인 버전은 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

좋은 웹페이지 즐겨찾기