Question

我有在Tablesorter帮助下过滤的表。每列在其顶部都有一个搜索框。在其中一列中，我有一个基于Chosen JavaScript的选项列表。我希望能够根据选项列表中选择的内容过滤此列。我已经尝试使用textExtraction函数触发围绕所选项目的span标记，但我无法使其工作。欢迎任何建议。

我在此JSFiddle

中进行了设置

<body>
<table class="tablesorter">
    <thead>
        <tr>
            <th class="title" data-placeholder="">Title</th>
            <th class="tags" data-placeholder="">Tags</th>
            <th class="date" data-placeholder="">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fish</td>
            <td>
                <select data-placeholder="Choose Tags" class="chosen-select" multiple>
                    <option value=""></option>
                    <option value="Option1">Sweden</option>
                    <option value="Option2">Norway</option>
                    <option value="Option3">Finland</option>
                </select>
            </td>
            <td>2012-12-03</td>
        </tr>
        <tr>
            <td>Boat</td>
            <td>
                <select data-placeholder="Choose Tags" class="chosen-select" multiple>
                    <option value=""></option>
                    <option value="Option1">Sweden</option>
                    <option value="Option2">Norway</option>
                    <option value="Option3">Finland</option>
                </select>
            </td>
            <td>2012-12-15</td>
        </tr>
    </tbody>
</table>

$(document).ready(function () {

$("table").tablesorter({
    theme: 'blue',
    textExtraction: {
        1: function (node, table, cellIndex) {
            return $(node).find("span").text();
        }
    },
    widthFixed: true,
    widgets: ["zebra", "filter"],
    widgetOptions: {
        filter_childRows: false,
        filter_columnFilters: true,
        filter_cssFilter: 'tablesorter-filter',
        filter_functions: null,
        filter_hideFilters: false,
        filter_ignoreCase: true,
        filter_reset: 'button.reset',
        filter_searchDelay: 300,
        filter_startsWith: false,
        filter_useParsedData: false

    }

});
});

Answer 1

嗯，只有一些东西不足以使它全部工作。

首先，这是一个updated demo。

首先，该选项的值应与文本匹配，或者您可以修改解析器，而不是找到所选的选项并获取其文本。

<select data-placeholder="Choose Tags" class="chosen-select" multiple>
    <option value=""></option>
    <option value="Sweden">Sweden</option>
    <option value="Norway">Norway</option>
    <option value="Finland">Finland</option>
</select>

接下来，包括一个解析器来获取所选选项并更新表缓存：

$.tablesorter.addParser({
    id: "select",
    is: function () {
        return false;
    },
    format: function (s, table, cell) {
        // since the select can get multiple results in an array,
        // we combine all the values using join(',')
        return ($(cell).find('select').val() || []).join(',') || s;
    },
    type: "text"
});

// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
var alreadyUpdating = false;
$('table').find('tbody').on('change', 'select', function (e) {
    if (!alreadyUpdating) {
        var $tar = $(e.target),
            $table = $tar.closest('table');
        alreadyUpdating = true;
        $table.trigger('updateCell', [$tar.closest('td')]);
        setTimeout(function () {
            alreadyUpdating = false;
        }, 10);
    }
});

现在，确保设置了标题选项（或向th添加“sorter-select”类）：

$("table").tablesorter({
    theme: 'blue',
    headers: {
        1: {
            sorter: 'select'
        }
    },
    // ....
 });

最后，将标题类名称设置为仅查找该列的已解析数据（filter-parsed）;添加了data-value以显示也可以设置初始过滤器。这也是可以添加sorter-select类名称而不是添加headers选项的位置。

<th class="tags filter-parsed" data-value="sweden" data-placeholder="">Tags</th>

一切都完成了！

使用tablesorter过滤所选选项列表中的选定项目

1 个答案: