How to use jQuery Datatables on VB.NET?

Question

I'm trying to integrate jQuery Datatables to an ASP.NET project, I already searched for some help of how to fill this datatables by using an aspx method. This is what I have without success.

<table id="usertables" class="table table-striped table-bordered responsive">
   <thead>
      <tr>
         <th>UserId</th>
         <th>UserName</th>
         <th>Location</th>
      </tr>
   </thead>
   <tbody>

   </tbody>
</table>

This is my table on my html file that has just a header with 3 columns and tbody is not set yet. After this I use this code to fill it

    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "crud_location/fill_users.aspx/BindDatatable",
            data: "{}",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    $("#usertables").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>Some location data</td></tr>");
                }
            },
            error: function (result) {
                alert("Error");
            }
        });
       });

Then I try to render jQuery Datatable running this script.

            $('#usertables').dataTable( {
                "bProcessing": true,
                "bServerSide": true
            } );

But when I run all this processes they throw me the table like this...

jQuery Datatable Result

The first row says "No data available in table", this make me think that the table got render before all records are appended to the table, and if I type any char on Search field, everything disappear, only "No data available in table" is there and no records are showed.

Where can I find an specific example of how to use this datatables on VB.NET? Thank you!

Answer 1

You will need to configure your plugin like this:

idTable = $("#my-table").dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "path/to/ServerSideProcessor"
        });

And you will need a Server Side Processor returning your data for each datatables parameters send each time you do a search, sort, etc. You don't need to program the server side as there are different codes already working.

Here is an example for asp.net in C# with a mysql server: http://datatables.net/forums/discussion/6678/serverside-processing-for-asp-net-c-with-sql-server/p1

More information here: http://datatables.net/development/server-side/

Answer 2

You have to put the datatable call before the close of success function inside ajax function, like this:

   $(document).ready(function () {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "crud_location/fill_users.aspx/BindDatatable",
        data: "{}",
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.d.length; i++) {
                $("#usertables").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>Some location data</td></tr>");
            }
             //HERE I CALL THE LOADDATATABLE FUNCTION
             loaddatatable();

        },
        error: function (result) {
            alert("Error");
        }
    });
   });

   function loaddatatable() {
      $('#usertables').DataTable();
    }