unable to Initialize Jquery DataTables on button click Ajax call

Question

Here is my HTML which is a partial view,

<table id="table_id" class="table table-inverse">
            <thead class="thead-inverse">
                <tr>
                    <th>Select</th>
                    <th>StructureName</th>
                    <th>FieldType</th>
                    <th>DataType</th>
                    <th>IsHeirarchy</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td><input type="checkbox" /></td>
                        <td>@item.One</td>
                        <td>@item.Two</td>
                        <td>@item.Three</td>
                        <td>@item.Four</td>
                        <td><a href="#"> Edit</a></td>
                    </tr>
                }
            </tbody>
        </table>

I'm initializing DataTable as shown below,

<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#table_id').DataTable();
        });
</script>

Above code is working fine and data table is initialized on page load by calling controller method to populate data.

Now, On click event I'm calling ajax method to pass input parameters to load data as shown below,

$(function () {
    $('#searchbtn').on('click', function () {          
        var url = '@Url.Action("LoadGridData", "Home")';
        var clientID = $('#Clientdata').val();
        var serviceId = $('#SelectService').val();
        $.ajax({               
            type: "GET",
            dataType: "html",                
            success: function (services) {
                $('#searchResults').load(url, { intclientId: clientID, intserviceID: serviceId });
                $('#table_id').DataTable();
            }
        });
    });

});

Here, while debugging i can see that $('#table_id').DataTable(); DataTable is initialized but its not staying.

Not sure whats happening. Any help appreciated :)

Don't initialize it in success function initialize it before jquery click event — Heemanshu Bhalla
– Heemanshu Bhalla, Commented Feb 26, 2016 at 8:00

Rajshekar Reddy · Accepted Answer · 2016-02-26 10:12:32Z

2

The problem is you are initializing the plugin before the table is loaded. You have to wait for the HTML to be loaded. Try this

    success: function (services) {
                    $('#searchResults').load(url, { intclientId: clientID, intserviceID: serviceId },function(){
                       $('#table_id').DataTable(); // now we apply plugin when the elment is available.
                    });                        
                }

answered Feb 26, 2016 at 10:12

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

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

2 Comments

MaVRoSCy Over a year ago

spot on! The jquery.load() makes the request and you imediately try to initialise the table before the data from server comes to your view... +1

ragmn Over a year ago

Thanks a lot! :) Perfect spot!

aldrien.h · Accepted Answer · 2016-02-26 08:08:02Z

0

I'm not sure if you can initialize the DataTable twice.

But you can pass the new data from ajax like:

$('#table_id').DataTable( {
   data: dataSet, //from ajax result
   columns: [
       { title: "Name" },
       { title: "Position" },
       ......
   ]
});

As stated in Documentation. Javascript sourced data

answered Feb 26, 2016 at 8:08

aldrien.h

3,7233 gold badges36 silver badges59 bronze badges

1 Comment

ragmn Over a year ago

problem was with the way I initialized the DataTable function. Not with the data. Thanks for the help anyways! :)

Collectives™ on Stack Overflow

unable to Initialize Jquery DataTables on button click Ajax call

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related