Jquery datatables 문자열 필터

아래 코드는 정상적으로 작동하고 모든 데이터를 가져옵니다. 난 datatable (sample_container)에 몇 가지 필터 문자열을 삽입하고 싶습니다. 따라서 주어진 sample_app의 경우, 페이지가로드 될 때 sample_container 데이터 테이블에 대한 일부 필터 문자열 (filter1, filter2)을 사용하여 자동으로 필터링하고 싶습니다. 어떤 아이디어?Jquery datatables 문자열 필터

$("#sample_container").html("<h2>Sample libs</h2>"); 
$.ajax({ 
      type: "GET", 
      url: "some_url", 
      data: some_data, 
      dataType: 'jsonp', 
      crossDomain: true, 
      async: false, 
      success: function(response) { 
       $("#sample_container").html("<h2>Sample Libraries</h2>"); 
       html = "<table class='datatable'>"; 
       blah blah 
       } 
       html += "</table>"; 
       $("#sample_container").append(html); 
       $("#sample_container .datatable").dataTable({ "bPaginate": false, 
                  "bAutoWidth": false, 
                  "bFilter": false, 
                  "bInfo": false 
       }).columnFilter({ sPlaceHolder: "head:after", 
            aoColumns: [ { type: "text" }, 
               { type: "text" }, 
               { type: "text" } 
            ] 
       }); 
      }, 

     }); 


{% if sample_app %} 
    <h1>{{ sample_app.id }} - {{ sample_app.name }}</h1> 
    <br/> 
    blah blah... 
{% endif %}

출처

2012-01-12 adfgg fgrr

더 빠르고 더 직관적 인 DataTable 구현 만하면됩니다. 본질적으로, 당신은 dom에 전체 테이블을 그려 넣고 완전히 다시 작성합니다. 이것은 매우 비효율적이며 clunky되기 전에 몇 백 행 이상의 데이터를 처리 할 수 없습니다. "서버 측"쿼리를 통해 수행

Datatables는 :

$('#marketinghistory').dataTable({  
      "bDestroy":true, 
      "aaSorting": [[ 0, "desc" ]], 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": "url of ajax source", 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "bAutoWidth": false, 
      "bFilter":false, 
      "bLengthChange": true, 
      "bPaginate": true, 
      "bSort": true, 
      "iDisplayLength": 15, 
      "bInfo": true, 
      "aoColumns": [ 
        { "sTitle": "column title", "sWidth": "5%", "sClass":"center" }, 
        { "sTitle": "column title", "sWidth": "25%" , "sClass":"center"}, 
        { "sTitle": "column title", "sWidth": "10%", "sClass":"center" }, 
        { "sTitle": "column title", "sWidth": "5%", "sClass":"center" } 
      ] 
     });

지금, 필터링, 당신은 몇 가지 옵션을 가지고있다. 미리 수행 할 작업을 알고 있다면 "데이터"필드에 변수를 전달하고 서버에서 정렬 할 수 있습니다. 하지만 변수가 다양하기를 원할 수도 있습니다.이 경우 몇 가지 농구가 있습니다.

datatables 코드이 코드 블록을 추가하면 위는 가변 필터를 할 수 있습니다 :

그래서, 변수를 기준으로 필터링하는 데 사용할 수있는 페이지에 입력 필드의 값으로 설정됩니다

"fnServerData": function (sSource, aoData, fnCallback) { 
       var name = $('#namesearch').val(); 
       var phone = $('#phonesearch').val(); 
       var company = $('#companysearch').val(); 

       aoData.push({ "name": "name", "value": name }, 
          { "name": "phone", "value": phone }, 
          { "name": "company", "value": company } 
       ); 

       $.ajax({ 
         "dataType": 'json', 
         "type": "POST", 
         "url": sSource, 
         "data": aoData, 
         "success": fnCallback 
       }); 
      }

사용자 입력. aodata.push는 콜백으로 푸시하도록 데이터를 설정하고 ajax 콜백이 작업을 수행합니다. 이 패턴은 고급 검색 페이지에서 왼쪽의 검색 필드와 오른쪽의 데이터 테이블을 사용합니다. 처음에는 빈 필드가 있으면 검색 필터가 없지만 값이 채워지고 테이블이 다시 그려지기 때문에 서버는 쿼리를 필터링 할 수 있습니다.

물론이 작업을 수행하려면 쿼리를 쉽게 수행 할 수 있도록 백 엔드 설정이 필요합니다. A tut on that is here.

출처

2012-01-18 05:24:34 bpeterson76

Jquery datatables 문자열 필터

답변

관련 문제