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

Question

I am trying to create a DataTables with a complex header, so there will be a complex header with this-

With custom Column Search Boxes and Column Visiblity Options like this -

So I what I like to have is something like this-

So What I have done is changed my headers of HTML to this-

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

From This-

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

But then my AJAX got stopped. No AJAX is working. So I get a output like this-

Can anyone help me, what I have done wrong?

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

If U like to have full code, here is this-

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

Please help.

Can you create jsfiddles that replicate the bug? www.jsfiddle.net/ — Eric Guan
– Eric Guan, Commented Sep 15, 2015 at 2:58
Sorry, I can't run PHP file there, So I am sharing my github repo for the whole code- github.com/abrarjahin/DataTables-AdvancedUse — S M Abrar Jahin
– S M Abrar Jahin, Commented Sep 15, 2015 at 3:05
Before i look at anything, it's sort of weird to have 2 rows of <th>. Plus, since those <th> you added are the problem, why don't you remove them, and add them back as a simple div, above your <table>? Also, you're only supposed to have <thead> surrrounding <th>, and optionally <tbody> surrounding <td>. — Eric Guan
– Eric Guan, Commented Sep 15, 2015 at 3:09

Gyrocode.com · Accepted Answer · 2015-09-15 12:35:18Z

2

CAUSE

orderCellsTop is the real problem here because you use middle row for sorting, there is no configuration option for that yet.

SOLUTION

You needs to put your input elements into the row with headings and use the bottom one for sorting.

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

Also you need to prevent sorting when input elements are clicked.

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

DEMO

See this jsFiddle for code and demonstration.

answered Sep 15, 2015 at 12:35

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S M Abrar Jahin Over a year ago

Thank for your kind help

S M Abrar Jahin Over a year ago

Hi, can you please tell me how to reload datatable data with ajax (resend request). I have tried $('#employee-grid').DataTable().ajax.reload(); and $('#employee-grid').DataTable().fnReloadAjax(); But none of them are working. Can u please help?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related