使用数据表搜索表

时间:2018-07-11 10:50:36

标签: jquery datatables

如何使用数据表在表上进行搜索:

 $(document).ready(function() {

        var catalogueSearch;
        var noResultsFound = false;
        var oldSearch = 0;

        var selectedContractsTable = $('.catalogueLinkedContractsTable').DataTable({
            "sDom": 't<"dt-panelfooter clearfix"ip>',
            "bSort": false,
            "bLengthChange": false,
            "bSearch": true,
            "paging": false,
            "searching": true,
            "order": [[2, "asc"]],
            "language": {
                "emptyTable": "No linked contracts found.",
                "zeroRecords": "No linked contracts found.",
                "info": "_START_ to _END_ of _TOTAL_"
                },
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false
                },
                {
                    "targets": [2],
                    "sClass": "hidden-xs hidden-sm"
                },
                {
                    "targets": [3,4],
                    "sClass": "hidden-xs",
                },
                {
                    "data": null,
                    "targets": [5],
                    "sClass": "updateTableRow text-center",
                    "defaultContent": "<button class=\"btn btn-danger br2 btn-xs fs12 table-btn\" id=\"AddContractBtn\">Remove</button>"
                }
            ]
        });

        var contractsTable = $('.catalogueContractsTable').DataTable({
            "sDom": 't<"dt-panelfooter clearfix"ip>',
            "bSort": false,
            "bLengthChange": false,
            "bSearch": true,
            "paging": false,
            "searching": true,
            "order": [[2, "asc"]],
            "language": {
                "emptyTable": "No contracts found.",
                "zeroRecords": "No contracts found.",
                "info": "_START_ to _END_ of _TOTAL_"
            },
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false
                },
                {
                    "targets": [2],
                    "sClass": "hidden-xs hidden-sm"
                },
                {
                    "targets": [3,4],
                    "sClass": "hidden-xs"
                },
                {
                    "data": null,
                    "targets": [5],
                    "sClass": "updateTableRow text-center",
                    "defaultContent": "<button class=\"btn btn-success br2 btn-xs fs12 table-btn\" id=\"AddContractBtn\">Add</button>"
                }
            ]

        });

表格搜索

@* Table Search *@

        $('#tableSearch').on('keyup', function () {
            table.search(this.value).draw();
        });

由于某种原因,我无法使搜索在我的桌子上工作。控制台中没有错误。我在网站上尝试了许多示例,但似乎无法使它们正常工作。请问有人有什么想法吗?除了示例以外,还有更多内容吗?我相信这是一个简单的问题。

1 个答案:

答案 0 :(得分:0)

最终写作:

$(document).ready(function () {
            $('.catalogueContractsTable').DataTable();

            $('input#tableSearch').on('keyup', function () {
                $('.catalogueContractsTable')
                    .DataTable()
                    .search($('input#tableSearch').val(), false, true)
                    .draw();
            });
        });

        @* Table Search for Unlinked Contracts *@
        $(document).ready(function () {
            $('.catalogueLinkedContractsTable').DataTable();

            $('input#tableSearch').on('keyup', function () {
                $('.catalogueLinkedContractsTable')
                    .DataTable()
                    .search($('input#tableSearch').val(), false, true)
                    .draw();
            });
        });

它现在可以与表中存在的任何列一起使用。