2017-01-18 2 views
-2

저는 웹 개발에있어 초보자입니다. C# winforms 응용 프로그램을 웹 응용 프로그램으로 변환하려고합니다.jQuery Datatables 맞춤 검색 플러그인

jQuery Datatables Plugin을 사용하는 테이블에서 사용자 정의 검색을 구현하려고합니다. 맞춤 검색 예 (https://datatables.net/examples/plug-ins/range_filtering.html)를 고려하십시오. 나는 "에딘버러"에있는 사무실을 제외한 모든 직원들의 세부 사항을 보여주고 싶습니다.

나머지 직원을 textbox 통해 필터링합니다.

그러니까 기본적으로 이것은 그의 사무실 에딘버러에있는 제외한 모든 직원과 그 세부 사항을 표시 할

select * from employees where office not like '%Edinburgh%'; 

sql 해당. 이러한 직원에 대해 필터를 수행하고 싶습니다.

편집 : 나는 jQuery를 Datatables를 사용하여 바이올린 (https://jsfiddle.net/53futc2w/5/)를 컴파일하고 데이터로 채워 한

.

비 SC 버튼을 클릭하면 설명에 "SC"이없는 값만 표시하고 싶습니다. '에든버러'열심히해야하는 경우

select * from products where description not like '%SC%'; 

이 값의 sql 해당하는이 텍스트 상자

감사에 제공되는 입력을 기반으로 필터링 할 그래서 기본적으로

답변

0

잘 모르겠어요 코드로 작성하거나 사용자가 자신의 값을 지정할 수있게하려는 경우 여기에 하드 코드 된 솔루션이 있으며 사용자 제공 값 옵션에 대한 설명이 포함됩니다.

그래서 대신 필터링 할 수 있도록하려면

https://jsfiddle.net/bjLzkjnc/

UPDATE :

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { var exclude = 'Edinburgh'; // User provided value: $("#user-exclude-field").val(); if(!exclude) return true; // nothing to exclude, so all rows should be included var re = new Regexp("\\b" + exclude + "\\b", "i"); // using the \b word boundary meta-character to match only "Edinburgh" and not "NewEdinburgh" (typo on purpose) return !re.test(data.office); // return TRUE (i.e. include this row in the search results) if the "office" attribute of the current row data does NOT match our excluded word }); 

UPDATE는 그래서 귀하의 의견에 따라

, 여기에 샘플 바이올린의 단어가 포함 된 모든 항목 또는 해당 단어가 포함되지 않은 모든 행의 필터. 업데이트 바이올린 : jsfiddle.net/1xh3kys5

여기의 마술은 filter입니다. 우리가 두 가지 상태를 추적하기를 원했기 때문에 그것은 단지 부울 변수였습니다. "SC 포함"vs "모든 것을 보여줍니다". 하지만 이제는 실제로 "SC 포함", "모든 것을 보여주십시오"및 "이 아닌 모든 것을 SC가 들어있는"으로 표시하는 세 가지 상태가 있습니다. 따라서 부울은 더 이상 충분하지 않습니다.

이 접근하는 몇 가지 방법이 있습니다,하지만 당신은 결국 더 많은 필터를 추가 할 수 있도록 내가 쉽게 개체입니다 필터로 갔다 :

필터는 여기 객체
var filters = { 
    sc: {active: false, re: new RegExp("\\bSC\\b", "i"), include: true} 
}; 

는 하나의 속성, 하나 개의 필터를 가지고, "sc"라고합니다.

  • 활성는에이 특정 "SC"필터 /를 해제하는 것입니다 : 그 속성은 우리가 우리의 세 가지 상태 모두를 대표하게됩니다 몇 가지 특성을 가진 개체, 자체입니다. 따라서 모든 행을 표시하려면 false로 설정하고 sc 필터를 비활성화하면됩니다.
  • 이 포함되어 있습니다.은 "SC"라는 단어가 포함 된 행을 포함 할 것인지 제외 할 것인지를 제어하는 ​​부울 값입니다.
  • re은 단순히 행을 필터링하려고 할 때 사용할 정규 표현식입니다.

이제 행을 필터링하면 정규 표현식을 사용하여 특정 행에 "SC"가 포함되어 있는지 확인하기 만하면됩니다.

var includes_sc = filters.sc.re.test(data[2]); 
return (filters.sc.include ? includes_sc : !includes_sc); 

그래서, "포함"속성의 값을 기준으로하고, includes_sc라는 변수에 저장합니다. 현재 필터가 의 모든 행에 "SC"가 포함되어 있으면 includes_sc을있는 그대로 반환합니다. 반면에 에 "012"가 포함되지 않은 모든 행에 "SC"가 포함되면 역함수 (! includes_sc)가 includes_sc으로 반환됩니다.

희망이 도움이됩니다.

+0

알 수 있습니다. 귀하의 바이올린 수정 내 응답을 참조하십시오 ... – MacPrawn

+0

감사합니다. 백만. 그것은 트릭을했다. 일반 단추 대신 라디오 단추를 사용하여 동일한 설정을 전환하려고합니다. https://jsfiddle.net/bjLzkjnc/1/ 업데이트 된 바이올린 – Tango

+0

을 찾으십시오. 글로벌'exclude_sc' 변수를 원하는 값으로 설정하고 테이블을 다시 그려야합니다. 따라서 라디오 버튼의 경우, 클릭 할 때'exclude_sc'를 설정하고 다시 그려야합니다. – MacPrawn

관련 문제