jQuery 数据表 - 具有 3 行 Header 的复杂 Headers - AJAX 不工作

Question

我正在尝试创建一个带有复合体 header 的 DataTables，所以会有一个带有这个-

的复合体 header

像这样使用自定义列搜索框和列可见性选项 -

所以我喜欢的是这样的-

所以我所做的是将 HTML 的 header 更改为这个-

            <thead>
                <tr>
                    <th rowspan="2">Name</th>
                    <th colspan="2">HR Information</th>
                    <th colspan="3">Contact</th>
                </tr>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>

来自这个-

            <thead>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>

但后来我的 AJAX 停了下来。没有 AJAX 在工作。所以我得到这样的输出-

谁能帮帮我，我做错了什么？

============================================= ==============================

如果你想要完整的代码，这里是-

HTML

    <div class="container">
        <table id="employee-grid"  class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th rowspan="2">Name</th>
                    <th colspan="2">HR Information</th>
                    <th colspan="3">Contact</th>
                </tr>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>
        </table>
    </div>

JS

$(document).ready(function()
{
    var dataTable =  $('#employee-grid').DataTable(
    {
        processing: true,
        serverSide: true,
        //ajax: "employee-grid-data.php", // json datasource for AJAX Data

        "ajax":
        {
            "url": "employee-grid-data.php",
            //"type": 'POST',
            "data": function ( d )              //Sending Custom Data for manupulating with elements out of the table
                    {
                        d.myKey = "myValue";
                        // d.custom = $('#myInput').val();
                        // etc
                    }
        },

        "pagingType": "full_numbers",   //Adding Last and First in Pagination
        stateSave: true,
        "language":{                    //Custom Message Setting
                        "lengthMenu": "Display _MENU_ records per page",    //Customizing menu Text
                        "zeroRecords": "Nothing found - sorry",             //Customizing zero record text - filtered
                        "info": "Showing page _PAGE_ of _PAGES_",           //Customizing showing record no
                        "infoEmpty": "No records available",                //Customizing zero record message - base
                        "infoFiltered": "(filtered from _MAX_ total records)"   //Customizing filtered message
                    },
        "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],        //For customizing number of data sets per page

        dom: 'l<"toolbar">Bfrtip',  //"Bfrtip" is for column visiblity - B F and R become visible
        initComplete:   function()  //Adding Custom button in Tools
                        {
                            $("div.toolbar").html('<button type="button" onclick="addNewEntry()">Add a New Record</button>');
                        },
        orderCellsTop: true,            //Column Visiblity Buttons - Visual Reorganising - Bug Fixing
        buttons:    [                   //Column Visiblity Buttons
                        {
                            extend: 'colvis',
                            collectionLayout: 'fixed three-column',
                            postfixButtons: [ 'colvisRestore' ]
                        }
                    ],

    });                 

    $("#employee-grid_filter").css("display","none");  // hiding global search box

    //Custom Search Boxes-Start////////////////////////////////////////////////////
    $('.employee-search-input').on( 'keyup change', function ()
    {   
        var i =$(this).attr('id');  // getting column index
        var v =$(this).val();       // getting search input value
        dataTable.columns(i).search(v).draw();
    } );
    //Custom Search Boxes-End//////////////////////////////////////////////////////

    //Date Picker Adding and Options-Start///////////////////////////////////////////////
    $( ".datepicker" ).datepicker(
    {
        dateFormat: "yy-mm-dd",
        showOn: "button",
        showAnim: 'slideDown',
        showButtonPanel: true ,
        autoSize: true,
        buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        closeText: "Clear"
    });

    $(document).on("click", ".ui-datepicker-close", function()
    {
        $('.datepicker').val("");
        dataTable.columns(5).search("").draw();
    });
    //Date Picker Adding and Options-End///////////////////////////////////////////////

});

function addNewEntry()
{
    $("#addNewData").modal({}).draggable();
    $(".modal-body")
    $('#addNewData').modal('show');
}

请帮忙。

Answer 1

CAUSE

orderCellsTop 是真正的问题，因为您使用中间行进行排序，目前还没有配置选项。

SOLUTION

您需要将 input 元素放入带有标题的行中，并使用底部的元素进行排序。

<thead>
    <tr>
        <th rowspan="2" valign="bottom">
            Name<br>
            <input type="text" id="0"  class="employee-search-input">
         </th>
        <th colspan="2">HR Information</th>
        <th colspan="3">Contact</th>
    </tr>
    <tr>
        <th>
           Position<br>
           <input type="text" id="2"  class="employee-search-input">
        </th>
        <th>
           City<br>
           <input type="text" id="3"  class="employee-search-input">
        </th>
        <th>
           Age<br>
           <input type="text" id="4"  class="employee-search-input">
        </th>               
        <th>
           Joining date<br>
           <input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" >
        </th>
        <th>
           Salary<br>
           <input type="text" id="6"  class="employee-search-input">
        </th>
    </tr>
</thead>

还需要防止在单击 input 个元素时进行排序。

$('#example thead .employee-search-input').on('click', function(e){
    e.stopPropagation();
});

DEMO

有关代码和演示，请参阅 this jsFiddle。

jQuery 数据表 - 具有 3 行 Header 的复杂 Headers - AJAX 不工作

jQuery datatables - Complex Headers with 3 row of Header - AJAX not working

html

ajax

datatable

jquery

datatables