JQuery Datatables 입력 내에서 검색

Question

여기에 표시된대로 입력 및 선택과 함께 Jquery Datatables 사용 : http://datatables.net/examples/api/form.html 또는 사용자 정의 열 렌더링 처리기를 사용하여 입력을 생성하고 전역 테이블 검색 작업을 수행하는 방법을 선택하면 어떻게됩니까?

예제를 보면 첫 번째 열, 읽기 전용 만 포함되어 검색에 다른 열을 포함하려면 어떻게해야합니까?

내 질문에 링크에서 예를보고 검색에 "Tokyo"를 입력하면 모든 행이 반환됩니다. 이는 "도쿄"가 모든 드롭 다운의 옵션이기 때문입니다. 내가 선택한 도쿄의 행만 표시하도록 선택할 수 있습니다. "33"을 입력하면 첫 번째 행의 첫 번째 열에 "33"값이 있어도 행이 표시되지 않습니다.

데이터 테이블의 특정 셀에 대해 검색 값을 정의하는 방법에 대한 문서를 찾을 수없는 것 같습니다.

Answer 1

이렇게하면 특정 열 대신 테이블 전체를 검색해야합니다.

var table = $('#table').DataTable(); 

$('#input').on('keyup', function() { 
    table.search(this.val).draw(); 
}); 

Answer 2

그것은 아주 잘 설명되어 있지 않습니다. 그리고 (하위) 버전 간에는 다르게 작동하거나 작동하지 않는 것으로 보입니다. dataTables는 HTML 열을 자동으로 검색하기위한 것이지만 어떤 이유로는 대부분의 경우에는 그렇지 않습니다. 도쿄가 선택되는 경우의 '의 <select>에 값 33의, 그리고 도쿄'의이 <input>에 를 반환합니다

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) { 
    return $(value).val(); 
}; 

: 가장 안전한 방법은 자신의 검색 필터를 만드는 것입니다. 그런 다음 원하는 열을 html-input 유형으로 정의하십시오. 문제는 유형을 기반으로 필터가 번 라는 것이있다 : 실시간 데이터에 대해서>http://jsfiddle.net/a3o3yqkw/

---

-

var table = $("#example").DataTable({ 
    columnDefs: [ 
     { "type": "html-input", "targets": [1, 2, 3] } 
    ] 
}); 

는 데모 http://datatables.net/examples/api/form.html에 기반을 참조하십시오. 그런 다음 dataTables는 반환 된 값을 캐시하여 모든 값을 계속해서 "계산"할 필요가 없습니다. 다행히도 dataTables 1.10.x에는 cells, rows 및 pages (invalidate)이라는 내장 함수가있어 데이터 테이블이 선택한 항목에 대한 캐시를 강제로 설정합니다.

그러나 <input>을 처리 할 때 값을 편집하면 value 속성 자체가 변경되는 문제가 있습니다. 따라서 invalidate()으로 전화를 걸어도 오래된 "하드 코드 된"값으로 필터링됩니다.

그러나 이것에 대한 해결책을 찾았습니다.텍스트 영역에 대한

$("#example td input").on('change', function() { 
    var $td = $(this).closest('td'); 
    $td.find('input').attr('value', this.value); 
    table.cell($td).invalidate(); 
}); 

대신 text()을 사용합니다 :

$("#example td textarea").on('change', function() { 
    var $td = $(this).closest('td'); 
    $td.find('textarea').text(this.value); 
    table.cell($td).invalidate(); 
}); 

이를 <input>의 현재의 값 (새로운 값)과 다음 전화 invalidate의 value 속성은 <input>로 변경하는 '포스 <select> '을 (를) 처리 할 때도 마찬가지입니다. 당신은 관련 <option> 년대의 selected 속성을 업데이트해야 할뿐만 아니라 다음 invalidate() 셀 것

$("#example td select").on('change', function() { 
    var $td = $(this).closest('td'); 
    var value = this.value; 
    $td.find('option').each(function(i, o) { 
    $(o).removeAttr('selected'); 
    if ($(o).val() == value) $(o).attr('selected', true); 
    }) 
    table.cell($td).invalidate(); 
}); 

갈래 바이올린 ->입력 및/또는 드롭 다운의 http://jsfiddle.net/s2gbafuz/ 봅니다 변경 내용 및 검색 새 값에 대한 ...

Answer 3

바로 입력에서 새로운 값 셀 컨테이너를 업데이트하고 UI 입력과 데이터 테이블 데이터 오브젝트 동기화 유지 여기에 할

가장 좋은 방법 :

$("#pagesTable td input,#pagesTable td select").on('change', function() { 
    var td = $(this).closest("td"); 
    dataTable.api().cell(td).data(this.value); 
}); 

을

Answer 4

Textarea으로 입력을 바꾸고 아래 CSS를 추가하십시오. 텍스트 영역이 입력과 비슷하게 보입니다.

textarea{ 
    height: 30px !important; 
    padding: 2px; 
    overflow: hidden; 
}