Question

我正在使用bootstrap数据表Datatables和bootstrap-taginput typehead.js。我是bootstrap数据表的新手。

以下是我的引导数据表Example的布局，请在顶部考虑Bootstrap标记输入框。

我想用bootstrap标记元素搜索数据表记录。但不知怎的，我无法使用bootstrap标记进行搜索。

提前致谢。

Answer 1

如果您开始使用桌面上的空数据，您可以通过更换内置搜索框来做一些聪明的事情。在示例中，我链接到我并不关心其中一列，其他列需要一些格式化：

var words = [];
var table = $('#example').DataTable({
    "columns": [
        null, {
            "render": function(data, type, row) {
                ~words.indexOf(data) || words.push(data);
                return data;
            }
        }, {
            "render": function(data, type, row) {
                var d = data.replace(/\, /g, " ");
                ~words.indexOf(d) || words.push(d);
                return data.split(", ").join("<br/>");
            }
        }
    ],
    "initComplete": function() {
        var searchBox = $("#example_wrapper").find("input[type='search']");
        var searchBoxHolder = searchBox.parent();
        searchBox.empty().remove();
        searchBoxHolder.append($("<input/>", {
            "type": "text"
        }).typeahead({
            source: words,
            afterSelect: function(word) {
                table.search(word).draw();
            }
        }).on("keyup", function(x) {
            if (words.indexOf($(x.target).val()) === -1) {
                table.search($(x.target).val()).draw();
            }
        }));
    }
});

基本上我们在这里做的是创建一个空白的搜索项数组，然后迭代每个第二个和第三个单元格，如果它不存在则将该项添加到数组中。在第三个单元格的情况下，我需要清除一些格式（额外的逗号）。然后我们得到原始搜索框及其父级。删除原始内容并将新附加到父级。然后，我们将其设置为typeahead，其中包含搜索字词列表。我们需要确保它仍然像原始一样，因此我们添加keyup函数。我希望这是有道理的。

工作示例是here，希望有所帮助。

将Bootstrap typeahead js与Bootstrap Datatable集成

1 个答案: