Question

我花了几天时间尝试了很多我在互联网上找到的解决方案问这里。

我有一个表单，在单击搜索按钮时显示包含数据的表格。该表有8列，其中3列我想添加一个文本输入，使用该文本输入应用了具有列数据的过滤器。为了更好地理解我的需要，有JsFiddle showing a working column filter。

所以，我尝试了上面的链接和Datatable exemple的解决方案没有成功，也无法找到我做错的事情。

有我的代码：

<table id="EquipmentTable" class="table table-striped table-bordered bottom-buffer" width="100%">
    <thead>
        <tr>
            <th><input type="checkbox" name="select_all" value="1" id="checkAll" class="text-center" onclick="$.fn.backboneSearch.checkAllResult()"></th>
            <th>Equipement</th>
            <th>Famille d'équipement</th>
            <th>Gamme d'équipement</th>
            <th>Etat</th>
            <th>UI</th>
            <th>Site de stockage</th>
            <th>Salle technique</th>
            <th></th>
        </tr>
    </thead>
    <tfoot id="backboneSearchtfoot">
        <tr id="filterrow">
            <th></th>
            <th id="textFilter1" class="textFilter"></th>
            <th id="textFilter2" class="textFilter"></th>
            <th id="textFilter3" class="textFilter"></th>
            <th class="listFilter"></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

// Setup - add a text input to each footer cell
$('#EquipmentTable tfoot th.textFilter').each(function (i) {
    $(this).html('<input type="text" data-index="' + i + '" />');
});

equipmentTable = $('#EquipmentTable').DataTable({
    aaData: result,
    aoColumns: [
        { mData: 'Identifier' },
        { mData: 'Mnemo' },
        { mData: 'FamGam.Family' },
        { mData: 'FamGam.Gamme' },
        { mData: 'dataState.Libelle' },
        { mData: 'IdentifierUI' },
        { mData: 'TechnicalRoom.InterventionUnitySenderSite' },
        { mData: 'IdentifierTechnicalRoom' },
    ],
    bDestroy: true,
    bFilter: false,
    bRetrieve: true,
    buttons: [{
        className: 'btn-warning',
        columns: [1, 2, 3, 4, 5, 6],
        extend: 'excel',
        fieldSeparator: ';',
        text: '<span class="glyphicon glyphicon-export"></span> Export'
    }],
    dom: 'Bfrtip',
    language: { /*not useful to show*/ },
    stateSave: true,
    bProcessing: true
});

$(equipmentTable.table().container()).on('keyup', 'tfoot th.textFilter input', function () {
    equipmentTable.column($(this).data('index'))
                  .search(this.value)
                  .draw();
});

result使用的aaData是一个json，我在搜索Rest方法的ajax成功。我在表格中填写了这个成功方法。

所以我的问题是：我做错了什么或被误解了？我试图将对象equipmentTable.column($(this).data('index')).search(this.value)与示例中返回的内容进行比较，并获得等效对象。这就是为什么我几乎可以肯定问题来自draw（）方法。

感谢您的帮助。

Answer 1

这是工作fiddle

首先，您的搜索无效，因为您将bFilter设置为false。然后只需删除此行或将此参数设置为true：

protected override DriverResult Display(RelatedPostsPart part, string displayType, dynamic shapeHelper) {
    return ContentShape("Parts_Blogs_RelatedPosts", () => {
        // To prevent infinite loop
        if (!displayType.Equals("Detail", StringComparison.OrdinalIgnoreCase)) {
            return null;
        }

        var blogPast = part.As<BlogPostPart>();

        if (blogPast == null || blogPast.BlogPart == null) {
            return null;
        }

        var blog = blogPast.BlogPart;

        // You can set the count in blog post settings to be configurable
        var blogPosts = _contentManager.Query(VersionOptions.Published, "BlogPost")
            .Join<CommonPartRecord>().Where(cr => cr.Container.Id == blog.Id && cr.Id != part.Id)
            .OrderByDescending(cr => cr.CreatedUtc)
            .Slice(0, 5)
            .Select(ci => ci.As<BlogPostPart>());

        var list = shapeHelper.List();
        list.AddRange(blogPosts.Select(bp => _contentManager.BuildDisplay(bp, "Summary")));

        var blogPostList = shapeHelper.Parts_Blogs_BlogPost_List(ContentItems: list);

        return shapeHelper.Parts_Blogs_RelatedPosts(ContentItems: blogPostList, Blog: blog);
    });
}

但还不够。用于绘制输入文本列的循环将无法工作，因为列索引从0开始。然后，如果在第二列设置第一列，并在第一个输入上搜索，则排序将在列0上完成。然后我在您的数据索引中添加了+1：

bFilter: true,

希望它有所帮助。

数据表draw（）方法不适用于列过滤器

1 个答案: