jQuery DataTables - 텍스트 필드가 포함 된 열의 사용자 정의 필터

Question

jQuery DataTables 플러그인을 사용하고 있습니다.

텍스트 필드가 포함 된 열에 대한 사용자 지정 필터를 만들고 싶습니다.

열의 입력 필드 값 값이 인 을 기준으로 필터링하고 싶습니다.

필터가 html과 검색 패턴이 일치하지 않도록이 작업을 수행해야합니다.

예를 들어, 나는 (텍스트 필드의을 속성 ID에서 발견되는 텍스트 형태) 모든 행을 찾지 못하고 ID 또는 형태를 검색 할 수 없습니다.

많은 질문과 포럼을 발견했습니다. mData이 내 문제의 해답입니다.

내가 무엇을 시도하든, 나는 그것을 작동시킬 수 없다.

prefColumns: [ { bSortable: true, bSearchable: false, sSortDataType: 'dom-checkbox' }, 
       { bSortable: true, bSearchable: true }, 
       { bSortable: true, bSearchable: true, sSortDataType: 'dom-text' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false } 
       ] 

나는이 같은 aoColumns 속성에 위의 배열을 할당합니다 :

// Find all the pref tables we want to turn into DataTables 

var $categoryTables = $('table[id$="cat-table"]'); 

// Create a jQuery dataTable for each pref category 

$categoryTables.dataTable({ 
    sScrollY: "350px", 
    bPaginate: false, 
    bAutoWidth: false, 
    sDom:  '<"prefsFilter"f>t', 
    aoColumns: prefColumns, 
    aaSorting: [[ 1, 'asc' ]] 
}); 

모든 것이 잘 작동 여기

내가 내 열을 정의하는 방법이다. 여기

내 사용자 지정 정렬 기능 (단지의 경우) 위에서 사용됩니다 : 내 테이블에

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) { 
    var aData = []; 
    $('td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
     aData.push(this.value); 
    }); 
    return aData; 
}; 

// Add a custom sort function for columns that might contain checkbox fields. 

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) { 
    var aData = []; 
    $('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
     var $box = $(':checkbox', $(this)); 
     if ($box.length === 0) { 
      aData.push("1"); 
     } 
     else { 
      aData.push($box.is(':checked') ? "2" : "3"); 
     } 
    }); 
    return aData; 
}; 

// Add a custom sort function for columns with slider buttons 

$.fn.dataTableExt.afnSortData['slider'] = function (oSettings, iColumn) { 
    var aData = []; 
    var s = 'input:hidden[id$="State"]'; 
    $('td:eq('+iColumn+') ' + s, oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
     aData.push(this.value); 
    }); 
    return aData; 
}; 

---

세 번째 열가 텍스트 필드를 포함하는 것입니다. mData 속성을 사용하기위한 시도에서

는,이 같은 물건을 내 열 정의를 수정했습니다 :

prefColumns: [ { bSortable: true, bSearchable: false, sSortDataType: 'dom-checkbox' }, 
       { bSortable: true, bSearchable: true }, 

       // add a mData property to the third column 

       { bSortable: true, bSearchable: true, sSortDataType: 'dom-text', 
        mData: function (src, type, val) { return type === 'filter' ? $(src).attr('value') : src; } }, 

       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false, sSortDataType: 'slider' }, 
       { bSortable: true, bSearchable: false } 
       ] 

나는 위의 아무것도 보인다 유사 잔뜩 시도했습니다 워드 프로세서 및 온라인 예제처럼 작업 할 수 있습니다.

포럼이나 다른 질문에서 발견 된 것이 없습니다.

누군가 내가 오해하고있는 것에 대해 단서를 줄 수 있다면 정말 감사 할 것입니다.

Answer 1

텍스트 열이 시도 :

{ "bSortable": true , "bSearchable" : true, 
    "mData": function (source, type, val) { 
     if (type === 'set') { 
      source.disp = val 
      source.filter = $(val).attr('value'); 
      return; 
     } 
     else if (type === 'filter') { 
      return source.filter; 
     } 

     return source.disp; 
    } 

    } 

유일한 단점은 당신이 다음 필드를 변경하면 다시 검색하려고한다는 것입니다 - 그것은 계정 변경에 적용되지 않습니다. 따라서 mData 메서드를 다시 호출하는 방법을 찾으면 모든 것이 제대로 작동합니다.

당신은이 방법을 사용하는 경우

"mRender": function (data, type, full) { 
    if (type === "filter") 
    { 
      node = $.parseHTML(data); 
      var val = $(node).find("select option:selected").text();      
       return val; 
    } 
    return data; 
} 

를 필터링 선택 상자의 선택 값을 지정 aoColumns에 mRender 속성을 사용할 수 있습니다

Answer 2

은, 당신이 SortDataType = 'DOM-선택'사용하지 말아야주의 그 열