Question

我已经在我的一个表上集成了字母搜索，但它影响了所有表格，而且我在视图的不同标签中有很多。谁能告诉我为什么？

 var _alphabetSearch = '';
var alphabet;
$.fn.dataTable.ext.search.push(function (settings, searchData) {
    if (!_alphabetSearch) {
        return true;
    }
    if (searchData[1].charAt(0) === _alphabetSearch) {
        return true;
    }
    return false;
});

 $(document).ready(function () {
    //debugger;
    alphabet = $('<div style="font-size:x-small" class="alphabet"/>').append('Search: ');
    $('<span class="clear active"/>')
        .data('letter', '')
        .html('None')
        .appendTo(alphabet);
    for (var i = 0; i < 26; i++) {
        var letter = String.fromCharCode(65 + i);
        $('<span/>')
            .data('letter', letter)
            .html(letter)
            .appendTo(alphabet);
    }

 var table = $("#tblAllUsers").DataTable();
    alphabet.insertBefore(table.table().container());
    alphabet.on('click', 'span', function () {
        var tst = alphabet.find('.active');
        alphabet.find('.active').removeClass('active');
        var t = $(this);
        $(this).addClass('active');
        var let = $(this).data('letter');
        _alphabetSearch = $(this).data('letter');
        table.draw();
    });

现在用这个初始化表：

 $("#tblProviders").dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("GetProvidersById")?id=' + $("#txtid").val(),
        bJQueryUI: true,
        sProcessing: "<img src='~/Images/spinner.gif' />",
        dom: 'AT<"clear">rtip',
        "pageLength": 5,
        bAutoWidth: false,
        "oLanguage": {
            sEmptyTable: "There are no Providers at this time",
            sZeroRecords: "There are no Providers at this time"
        },
        "aoColumns": [
            { "sWidth": "1%", sClass: "smallFonts" },
            { "sWidth": "15%", sClass: "smallFonts" },
            { "sWidth": "15%", sClass: "smallFonts" },
            { "sWidth": "10%", sClass: "smallFonts" },
            { "sWidth": "10%", sClass: "smallfonts" },
            { "sWidth": "15%", sClass: "smallFonts" },
            { "sWidth": "15%", sClass: "smallFonts" },
            {
                "sWidth": "15%", sClass: "centerbutton", "sName": "UserId", "mRender": function (data, type, row) {

                    return "<button type='button' class='displaybutton' id='" + row[0] + "' onclick=RemoveProvider(this);return false; >Remove</button>";
                }
            }
        ],
        tableTools: {
            "sSwfPath": "../../Scripts/swf/copy_csv_xls_pdf.swf",
            "aButtons": [

            ]

        }
    });
    $("#tblProviders").dataTable().fnSetColumnVis(0, false);
    otab = $("#tblProviders").dataTable();
    otab.fnSort([[1, 'asc']]);

我现在已经从网站上包含了搜索alpha搜索的最新文件，并显示了alpha行，但每个字母都没有结果。

Answer 1

您正在按照part I of this article中的说明实施字母搜索。本文还有final part，其代码支持多个表。

您需要做的就是加入dataTables.alphabetSearch.css和dataTables.alphabetSearch.min.js，可以在features plug-ins page下载并使用以下代码：

var table = $('#tblAllUsers').DataTable( {
    dom: 'Alfrtip'
} );

我们增强了字母搜索插件，添加了搜索支持，行分组，数字过滤，本地化和替代排序机制，请参阅jQuery DataTables - Alphabetical search以获取代码和演示。

DataTable字母搜索会影响所有表

1 个答案: