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

Question

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.

Your doing it wrong.. you can give your JSON data itself as input to the plugin during initialization. Check dataTables for using local data — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 25, 2016 at 14:08

Offir · Accepted Answer · 2016-12-25 14:03:18Z

1

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();

edited Dec 25, 2016 at 14:03

answered Dec 25, 2016 at 9:24

Offir

3,5015 gold badges50 silver badges81 bronze badges

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

3 Comments

Offir Over a year ago

@HatimRanapurwala You need to append the rows to the tbody element of the table.

Hatim Ranapurwala Over a year ago

I tried by appending the tbody element also but it is showing the same results I am not able to bind the data to datatable.

Hatim Ranapurwala Over a year ago

Pe`er, Thanks alot It really worked for me. Thanks for making Demo and commenting on my Question.

Daniel · Accepted Answer · 2016-12-25 08:54:28Z

0

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.

edited Dec 25, 2016 at 8:54

answered Dec 25, 2016 at 8:41

Daniel

9,86713 gold badges54 silver badges72 bronze badges

1 Comment

Hatim Ranapurwala Over a year ago

I am not using MVC I am using ASP.NET C#

ab29007 · Accepted Answer · 2016-12-25 09:26:56Z

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

Yes I have tried this and the output you can see in the image

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Related