添加新列后如何使用JQuery DataTable进行列搜索

Question

I have a jquery dattable with several columns, those columns have their own column search textbox, and I would like to add some new columns and new set of data to the table by clicking a button. 我有一个带有多个列的可查询的jQuery，这些列具有自己的列搜索文本框，我想通过单击按钮向表中添加一些新列和新数据集。

I do the following step: 1. Destroy the existing table 2. Append new table header to form new column 3. Re-build the dattable 4. Append data with fnAdd() 我执行以下步骤：1.销毁现有表2.追加新表头以形成新列3.重新构建数据表4.使用fnAdd（）追加数据

The golbal search looks working, but the column search looks cannot work properly after I append new data. 全局搜索看起来有效，但是在附加新数据后，列搜索外观无法正常工作。

<html>
<head>
    <!--jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <!--Bootstrap-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script type="text/javascript" src="../res/lib/popper.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <!--jQuery Table-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">    
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

    <script>
        var header = [];

        $(document).ready(function() {

            salesInformationTable = $('#table').DataTable();

            // Apply the search

            salesInformationTable.columns().every( function () {
                var that = this;

                header.push(that);
            } );

            // Setup - add a text input to each footer cell
            $('#table thead tr:eq(0) th').each( function () {
                var title = $(this).text();
                console.log('index:');
                console.log($(this).index());
                //var columnSeachNotAddIndex = [0,5,6];
                if($(this).index()!=0){
                    console.log('add column search to column index:'+$(this).index());
                    $(this).html( '<input id="col_search_'+$(this).index()+'" type="text" placeholder="Search '+title+'" />' );
                    $('.col-search').hide();
                }
            } );


            $('#purchaser_searchInput').keyup(function(){
                console.log("keyup - purchaser_searchInput");
                var content = $('#col_search_4').val();
                $('#col_search_4').val($(this).val());
                if($('#col_search_4').val()!=content){
                    var that = header[4];

                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                }
            });

        });

        function destroyClick(){
            $('#table').DataTable().destroy();
        }

        function buildClick(){
            $('#table').DataTable();
        }

        function addNewCol(){
            $('#table thead .header_title').append('<th>New Column</th>');
            $('#table thead .header_search').append("<th><div class='row'><input type='text' id='rebate_1_searchInput' class='searchbox'></div></th>");
            $('#table thead .header_search_title').append('<th></th>');

            $('#rebate_1_searchInput').keyup(function(){
                console.log("keyup - purchaser_searchInput");
                var content = $('#col_search_7').val();
                console.log(content);
                $('#col_search_7').val($(this).val());
                if($('#col_search_7').val()!=content){
                    var that = header[7];

                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                }
            });

        }

        function addData(){
            $('#table').dataTable().fnAddData([
                "T1",
                "T2",
                "T3",
                "T4",
                "T5",
                "T6",
                "T7",
            ]);
        }

        function addData2(){
            $('#table').dataTable().fnAddData([
                "T1",
                "T2",
                "T3",
                "T4",
                "T5",
                "T6",
                "T8",
            ]);
        }

        function addDataNew(){
            $('#table').dataTable().fnAddData([
                "T1",
                "T2",
                "T3",
                "T4",
                "T5",
                "T6",
                "T7",
                "T8"
            ]);
        }

        function addDataEmpty(){
            $('#table').dataTable().fnAddData([
                '',
                "T2",
                "T3",
                "T4",
                "T5",
                "T6",
                "T7",
                "T8"
            ]);
        }

        function searchEmpty(){
            console.log("search empty");
            $('#table').DataTable().column(0).search('^\s*$', true, false).draw();
        }

        function searchEmpty2(){
            console.log("search empty");
            $('#table').DataTable().column(1).search('^\s*$', true, false).draw();
        }

        function removeFilter(){
            $('#table').DataTable()
             .search( '' )
             .columns().search( '' )
             .draw();
        }
    </script>
</head>
<body>
    <table id="table" class="display" style="width:100%">
        <thead>
            <tr class="header_search_title col-search">
                <th></th>
                <th>Instance ID</th>
                <th>PASP Date (YYYY/MM/DD)</th>
                <th>Unit Property Address (YYYY/MM/DD)</th>
                <th>Purchasers</th>
                <th>Mortgage Application Date</th>
                <th>Mortgate Status</th>
            </tr>
            <tr class="header_search">
                <th>
                    <div class="row">
                        Search:
                    </div>
                </th>
                <th>
                    <div class="row">
                        <input type="text" id="test_input" class="searchbox">
                    </div>
                </th>
                <th>
                    <div class="row">
                        <input type="text" id="paspDate_searchInput" class="searchbox">
                    </div>
                </th>
                <th>
                    <div class="row">
                        <input type="text" id="unitPropertyAddress_searchInput" class="searchbox">
                    </div>
                </th>
                <th>
                    <div class="row">
                        <input type="text" id="purchaser_searchInput" class="searchbox">
                    </div>
                </th>
                <th>
                    <div class="row">
                        <input type="text" id="mortgageApplicationDate_searchInput" class="searchbox">
                    </div>
                </th>
                <th>
                    <div class="row">
                        <select class="form-control selectionbox2" id="salesInformation_status">
                            <option value="">All</option>
                            <option value="Applied">Applied</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                            <option vakue="Withdrawn">Withdrawn</option>
                        </select>
                    </div>
                </th>
            </tr>
            <tr class="header_title">
                <th>
                    <input type="checkbox" id="select-all" />
                </th>
                <th>
                    <div class="row">
                        <span>Instance ID</span>
                    </div>
                </th>
                <th>
                    <div class="row">
                        <span>PASP Date</span>
                    </div>
                </th>
                <th>
                    <div class="row">
                        <span>Unit Property Address</span>
                    </div>
                </th>
                <th>
                    <div class="row">
                        <span>Purchasers</span>
                    </div>
                </th>
                <th>
                    <div class="row">
                        <span>Mortgage Application Date</span>
                    </div>
                </th>
                <th>
                    <div class="row">
                        <span>Mortgage Status</span>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <button onclick="destroyClick()">Destroy</button>
    <button onclick="buildClick()">Build</button>
    <button onclick="addNewCol()">New Column</button>
    <button onclick="addData()">Data 1</button>
    <button onclick="addData2()">Data 2</button>
    <button onclick="addDataNew()">Data New</button>
    <button onclick="addDataEmpty()">Data Empty</button>
    <button onclick="searchEmpty()">Search Empty</button>
    <button onclick="searchEmpty2()">Search Empty2</button>
    <button onclick="removeFilter()">Remove Filter</button>
</body>

I focus in the id: purchaser_searchInput column search textbox, when you type something to the textbox, no result is fullfill the searching requirement, then you delete the search text, the table will not turn back to the original data. 我将重点放在id：purchase_searchInput列搜索文本框中，当您在文本框中键入内容时，没有结果满足搜索要求，然后删除搜索文本，该表将不会返回到原始数据。 However, if you use the global search, you can easily search everything. 但是，如果使用全局搜索，则可以轻松搜索所有内容。

Answer 1

Solution: empty the header array after add the new column, 解决方案：添加新列后清空标题数组，

header = [];

after that run the following: 之后，运行以下命令：

        salesInformationTable.columns().every( function () {
            var that = this;

            header.push(that);
        } );

That's all. 就这样。

添加新列后如何使用JQuery DataTable进行列搜索

问题描述

1 个解决方案

解决方案1
0 2019-08-30 08:12:54

添加新列后如何使用JQuery DataTable进行列搜索

问题描述

1 个解决方案

解决方案1 0 2019-08-30 08:12:54

解决方案1
0 2019-08-30 08:12:54