jQuery DataTable ColumnFilter 플러그인입니다. '선택'필터 스타일이 정확히 일치합니까?

Question

작성중인 데이터 테이블에는 "성"열이 있습니다. 여기에 그래서 나는 "남성"은 모든 표시 필터를 선택하면

columnFilter({ 
    aoColumns: [ { type: "select", values: [ 'Male', 'Female' ] }, 
       { type: "text" }, 
       { type: "number" },  
       { type: "number" }] 
}); 

문제는 단어 "남성"단어 "여성"에 있다는 것입니다 .. 필터입니다. 이 항목을 정확히 일치 시키거나 최소한 대소 문자를 구분할 수있는 방법이 있습니까?

Answer 1

Columnfilter 플러그인은 datatables API 함수 fnFilter을 사용하여 개별 검색을 수행합니다. 저자의 설명서에 따르면 ((대개 fnFilter 검색)) 대소 문자를 구분하는 매개 변수는 잊어 버린 것 같으며 플러그인은 필터 설정에 많은 여유를주지 않습니다.

몇 가지 대안이 있습니다.

fnFilter 함수를 활용하여 자신 만의 필터링 플러그인을 디자인 할 수 있습니다. 이제는 해당 플러그인이 있음을 알게되었습니다.

일부 특수 솔루션 인 like in this example을 사용할 수 있습니다. 이것은 매우 게으른 예제이지만 플러그인이 기본적으로 어떻게 작동하는지 보여줍니다.

플러그인을 사용하는 경우 플러그인 코드에서 필터링을 변경할 수 있습니다. 이것은 쉬운 수정이기 때문에 내가 권하는 것입니다. 추가 /datatables.columnFilter.js에이 라인을 변경하면 그 .fnFilter의 당신이 원하는 것을 얻을 충분해야한다

//Line 563 
... 
var defaults = { 
    sPlaceHolder: "foot", 
    sRangeSeparator: "~", 
    iFilteringDelay: 500, 
    aoColumns: null, 
    sRangeFormat: "From {from} to {to}", 
    bCaseSensitive: true //add this 
}; 

properties = $.extend(defaults, options); 

//Line 357 
... 
function fnCreateSelect(oTable, aData, bRegex, bCaseSensitive) { //add parameter 
    var oSettings = oTable.fnSettings(); 
    if (aData == null && oSettings.sAjaxSource != "" && !oSettings.oFeatures.bServerSide) { 
     oSettings.aoDrawCallback.push({ 
      "fn": (function (iColumn, nTh, sLabel) { 
       return function() { 
        if (oSettings.iDraw == 2 && oSettings.sAjaxSource != null && oSettings.sAjaxSource != "" && !oSettings.oFeatures.bServerSide) { 
         //add parameter 
         return fnCreateColumnSelect(oTable, null, _fnColumnIndex(iColumn), nTh, sLabel, bRegex, true, true, !bCaseSensitive); 
        } 
       }; 
      })(i, th, label), 
      "sName": "column_filter_" + i 
     }); 
    } 
    //add parameter 
    fnCreateColumnSelect(oTable, aData, _fnColumnIndex(i), th, label, bRegex, true, true, !bCaseSensitive); 
} 

//Line 311 
... 
function fnCreateColumnSelect(oTable, aData, iColumn, nTh, sLabel, bRegex, bCaseSensitive) { //add this 

    //... 

    select.change(function() { 

     //... 

     if (bRegex) 
      //add parameter 
      oTable.fnFilter($(this).val(), iColumn, bRegex, true, true, !bCaseSensitive); 
     else 
      //add parameter 
      oTable.fnFilter(unescape($(this).val()), iColumn, false, true, true, !bCaseSensitive); 
     fnOnFiltered(); 
    }); 
} 

충분합니다. 거기에 더 많은 것들이 있습니다. 그래서 다른 것들에도 추가하고 싶다면, 똑같은 일을하십시오.

나는 이제 옵션을 입력하고 이벤트를 만든 함수에 동일한 매개 변수를 추가하고 물론 .fnFilter 함수 자체에 추가 한 bCaseSensitive이라는 기본 매개 변수를 추가했습니다.

행운을 빈다.

제대로 작동하지 않으면 다운로드 할 수있는 어딘가에서 변경된 플러그인을 업로드 할 수 있는지 확인합니다.