Hatim Ranapurwala
Hatim Ranapurwala

Reputation: 113

Not able to Bind HTML DataTable in asp.net with Java script

The HTML Code :

<div class="" style='overflow: scroll; overflow-y: hidden;'>
    <table id="datatable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Company Name</th>
                <th>Customer Type</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Mobile1</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="table-list-data">
        </tbody>
    </table>
</div>

The Java Script Code:

$.ajax({
    dataType: "json",
    type: "POST",
    url: 'http://localhost:52235/api/AdminPanel/GetCustomer',
    data: data,
    async: true,
    success: function (data) {
        var trHTML = '';

        $.each(data.response.customers, function (i, item) {

            trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' +
                '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>';
        });

        $('#datatable').append(trHTML);
    },
    error: function (jqXHR, textStatus, errorThrown) {
    }
});

I am Getting like this as output it is displaying the data but it is not binding the data to data-table please help regarding the binding of the data-table.

enter image description here

Upvotes: 0

Views: 380

Answers (3)

Offir
Offir

Reputation: 3491

There are several ways to work with this tool after getting the data from the server:
You can go through each row and populate the table by your self like you do , or you can let datatables do it for you. I recommend you to follow this datatables tutorial.

I suggest you to follow the tutorial because if you won't you will have to use the datatables api for almost every action.
For example ,your delete action will have to use the row remove api, just deleting the row from the DOM without using the api won't update the table and will cause errors while Sorting/Searching..

This is a demo with your problem And this is WORKING DEMO

*Notice that you first populate your table and only after that convert it to DataTable. For your code, just add after you finished to append the rows to the table:

 $('#datatable tbody').append(trHTML);
 $('#datatable').DataTable();

Upvotes: 1

Hikmat Sijapati
Hikmat Sijapati

Reputation: 6994

Did you try like this..

$.ajax({
    dataType: "json",
    type: "POST",
    url: 'http://localhost:52235/api/AdminPanel/GetCustomer',
    data: data,
    async: true,
    success: function (data) {
      var trHTML = '';

      $.each(data.response.customers, function (i, item) {

        trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' +  '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>';
      });
      $('#table-list-data').html(trHTML);
    },
    error: function (jqXHR, textStatus, errorThrown) {
    }
});

Upvotes: 0

Daniel
Daniel

Reputation: 9829

The problem in your code is that you are just appending html rows to an initialized datatable.

You need to tell the control to bind data e.g. coming from your controller.

https://code.msdn.microsoft.com/jQuery-Datatable-With-b4f844e3#content is an example to get you startet.

Give it a try, this should fit your needs.

Upvotes: 0

Related Questions