我试图了解tablesorter的工作原理。 现在我尝试使用select2 beta功能。我一直在关注这个例子（mottie.github.io/tablesorter/docs/example-widget-filter-formatter-select2.html），源代码和一些互联网示例，但我无法工作正确。 我遇到的问题是，如果我从我的代码中取出 filter_formatter 和 filter_selectSource 选项，其他过滤器工作正常，但是当我添加它时，它们不会＃＆＃ 39;吨。当选项添加时，它只显示第一个过滤器（不是select2）和第一个select2（因此我认为错误在这里，但我无法找到它）。但是会出现更多过滤器，其中任何一个都能正常工作。
任何帮助将不胜感激。我会在最后添加一些图片。
<script src="~/Content/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/jquery.tablesorter.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/jquery.tablesorter.widgets.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-filter.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-filter-formatter-select2.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-headerTitles.js" type="text/javascript"></script>
<script src="~/Content/tablesorter-master/js/widgets/widget-output.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var categoryArray = [];
var languajesArray = [];
@Code
For Each categoryElement As String In categoryList
@<text>
categoryArray.push("@categoryElement");
</text>
Next
For Each languajeElement As String In languajeList
@<text>
languajesArray.push("@languajeElement");
</text>
Next
End Code
$('#tblDoc').tablesorter({
widgets: ['filter', 'stickyHeaders'], //, 'uitheme'
debug: true, //Firebug (console) needed --> /docs/example-option-debug.html
sortMultiSortKey: 'altKey', //Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
widthFixed: true,
ignoreCase: false, // if false, upper case sorts BEFORE lower case
sortList: [[3, 1]], //[[column, asc(0)/desc(1)]]
widgetOptions: {
filter_columnFilters: true,
filter_childRows: false,
filter_childByColumn: false,
filter_columnAnyMatch: false, // if true, allows using "#:{query}" in AnyMatch searches (column:query; added v2.20.0)
filter_cellFilter: '', // extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: '', // extra css class name(s) applied to the table row containing the filters & the inputs within that row, this option can either be a string (class applied to all filters) or an array (class applied to indexed filter) or []
filter_defaultFilter: {}, // add a default column filter type "~{query}" to make fuzzy searches default; "{q1} AND {q2}" to make all searches use a logical AND.
filter_excludeFilter: {}, // filters to exclude, per column
filter_external: '', // jQuery selector (or object) pointing to an input to be used to match the contents of any column, please refer to the filter-any-match demo for limitations - new in v2.15
filter_filteredRow: 'filtered', // class added to filtered rows (rows that are not showing); needed by pager plugin
filter_formatter: { // add custom filter elements to the filter row, see the filter formatter demos for more specifics
1: function ($cell, indx) { //https://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-select2.html
return $.tablesorter.filterFormatter.select2($cell, indx, {
match: true, // adds "filter-match" to header
multiple: true,
cellText: '', // Cell text
width: '95%', // adjusted width to allow for cell text
value: [], // initial select2 values
});
},
2: function ($cell, indx) {
return $.tablesorter.filterFormatter.select2($cell, indx, {
match: true, // adds "filter-match" to header
multiple: true,
cellText: '', // Cell text
width: '95%', // adjusted width to allow for cell text
value: [], // initial select2 values
});
}
},
filter_functions: null,// add custom filter functions using this option, see the filter widget custom demo for more specifics on how to use this option
filter_hideEmpty: true, // hide filter row when table is empty
filter_hideFilters: false, // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately, below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_ignoreCase: true, // Set this option to false to make the searches case sensitive
filter_liveSearch: true, // if true, search column content while the user types (with a delay)
filter_onlyAvail: 'filter-onlyAvail', // a header with a select dropdown & this class name will only show available (visible) options within that drop down.
filter_placeholder: { search: '', select: '' }, // default placeholder text (overridden by any header "data-placeholder" setting)
//filter_reset : 'button.reset', // jQuery selector string of an element used to reset the filter
filter_saveFilters: true, // Use the $.tablesorter.storage utility to save the most recent filters (default setting is false)
filter_searchDelay: 300, // Delay in milliseconds before the filter widget starts searching; This option prevents searching for, every character while typing and should make searching large tables faster.
filter_searchFiltered: true, // allow searching through already filtered rows in special circumstances; will speed up searching in large tables if true
filter_selectSource: // include a function to return an array of values to be added to the column filter select; make sure to include "filter-match" class otherwise you'll get no results (exact match is default) http://jsfiddle.net/Mottie/abkNM/4406/
{
// added as select2 options (you could also use select2 data option)
1: function (table, column) {
return categoryArray;
},
2: function (table, column) {
return languajesArray;
}
},
filter_serversideFiltering: false, // if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.
filter_startsWith: false, // Set this option to true to use the filter to find text from the start of the column, So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_useParsedData: false, // Filter using parsed content for ALL columns, be careful on using this on date columns as the date is parsed and stored as time in seconds
filter_defaultAttrib: 'data-value', // data attribute in the header cell that contains the default filter value
filter_selectSourceSeparator: '|', // filter_selectSource array text left of the separator is added to the option value, right into the option text
stickyHeaders: '', // extra class name added to the sticky header row
stickyHeaders_offset: 0, // number or jquery selector targeting the position:fixed element
stickyHeaders_addResizeEvent: true, // trigger "resize" event on headers --> problems resizing and sticky
stickyHeaders_includeCaption: true, // if false and a caption exist, it won't be included in the sticky header
stickyHeaders_zIndex: 2, // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
stickyHeaders_attachTo: null, // jQuery selector or object to attach sticky header to
stickyHeaders_xScroll: null, // jQuery selector or object to monitor horizontal scroll position (defaults: xScroll > attachTo > window)
stickyHeaders_yScroll: null, // jQuery selector or object to monitor vertical scroll position (defaults: yScroll > attachTo > window)
stickyHeaders_filteredToTop: true // scroll table top into view after filtering
}
});
//Filters style
$(".tablesorter-filter").addClass("searchStyle");
});
</script>
<div class="wrapperOverflow">
<table id="tblDoc" class="tablesorter">
@*HEAD*@
<thead>
<tr>
<th id="thDocTitle" class="filter-match textAlignCenter cutStrings">@ViewData("Titulo")</th>
<th id="thCategory" class="filter-match textAlignCenter cutStrings">@ViewData("Category")</th>
<th id="thLanguage" class="filter-match textAlignCenter cutStrings">@ViewData("Language")</th>
<th id="thDatePubl" class="filter-match textAlignCenter cutStrings @strDateFormat">@ViewData("DatePub")</th>
</tr>
</thead>
我在控制台中获取这些错误：
The select2('val') method was called on an element that is not using Select2.a.fn.select2 @ select2.full.min.js:3
select2.full.min.js:3 Uncaught TypeError: Cannot read property 'val' of undefined
http://subefotos.com/ver/?45cbc45ec22a07843427443ff7d04f2fo.jpg
没有 filter_formatter 和 filter_selectSource
http://subefotos.com/ver/?ec622c64ba43c5dba03c156465b5e497o.jpg
