jQuery 数据表 - 具有 3 行标题的复杂标题 - AJAX 不起作用答案

【问题标题】：jQuery datatables - Complex Headers with 3 row of Header - AJAX not workingjQuery 数据表 - 具有 3 行标题的复杂标题 - AJAX 不起作用
【发布时间】：2015-09-15 02:47:59
【问题描述】：

我正在尝试创建一个带有复杂标题的DataTables，所以会有一个带有这个的复杂标题-

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

所以我喜欢这样的东西-

所以我所做的就是将我的 HTML 标题更改为这个-

            <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>

$(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');
}

请帮忙。

【问题讨论】：

你能创建复制错误的 jsfiddles 吗？ www.jsfiddle.net/
当然 - 我现在正在创建 JSFiddles
对不起，我不能在那里运行 PHP 文件，所以我分享了我的 github 存储库以获取整个代码-github.com/abrarjahin/DataTables-AdvancedUse
我觉得会更有意义，等待你的帮助
在我看任何东西之前，有 2 行有点奇怪。另外，既然你添加的那些是问题，你为什么不删除它们，然后将它们作为一个简单的 div 添加回来，在你的上方？此外，您应该只在，并且可以选择在。
周围有
周围有

周围有
周围有

标签： jquery html ajax datatable datatables

【解决方案1】：

原因

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

解决方案

您需要将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();
});

演示

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

【讨论】：

感谢您的帮助
您好，您能告诉我如何使用 ajax 重新加载数据表数据（重新发送请求）。我试过 $('#employee-grid').DataTable().ajax.reload();和 $('#employee-grid').DataTable().fnReloadAjax();但他们都没有工作。你能帮忙吗？