Bind data and display datatable on aspx page using Jquery in asp.net on tbody

Question

Here is my HTML table:

<table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Check Box</th>
            <th>Category Name</th>
            <th>Category Details</th>
            <th>Status</th>
            <th>Action</th>    
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Other browsers</td>
            <td>All others</td>
            <td>yes</td>
            <td>for</td>
            <td>Ummm</td>
        </tr>
    </tbody>
</table>

I have already bound the HTML table using jQuery. Here is my jQuery code:

$(document).ready(function() {
    debugger
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebForm5.aspx/BindDatatable",
        data: "{}",
        dataType: "json",
        success: function (dt) {
            for (var i = 0; i < dt.d.length; i++) {
                $("#example1").append("<tr><td> <input type='checkbox' /></td><td>" + dt.d[i].CategoryID + "</td><td>" + dt.d[i].Name + "</td><td>" + dt.d[i].description + "</td><td> <button type='submit'>Submit</button></td></tr>");
            }
        },
        error: function (result) {
            alert("Error");
        }
    });
});

My problem is that the table is binding at <thead> not at <tbody> thats why jQuery paging, searching, sorting is not working. I Want to bind at <tbody>. What is wrong with my code? Can anyone help me out?

yes...i have done by using this link. aspdotnet-suresh.com/2012/03/… ,My problem is that when i am statically putting data in my <tbody> the paging searching sorting everything is working fine but when i am dynamically binding the data using jquery the functionality is not working.. — Manoj Maharana
– Manoj Maharana, Commented Jul 8, 2016 at 15:34
Where your data are provided ? From your database ? Are you server side ? — John
– John, Commented Jul 8, 2016 at 15:36
Try console.log(dt) and tell me what do you have in this parameter — John
– John, Commented Jul 8, 2016 at 15:40

John · Accepted Answer · 2016-07-08 16:09:06Z

1

You have to define the child what you want. There is different alternative

You should replace your element $("#example1") by this :

$("#example1 tbody")

Or you can do this too :

$("#example1 > tbody")

You can define an ID to your tbody

<tbody id="myBody">

And get it with jQuery :

$("#myBody")

Then you can do this :

$("#example1 > tbody").append("<tr><td> <input type='checkbox' /></td><td>" + dt.d[i].CategoryID + "</td><td>" + dt.d[i].Name + "</td><td>" + dt.d[i].description + "</td><td> <button type='submit'>Submit</button></td></tr>");

edited Jul 8, 2016 at 16:09

answered Jul 8, 2016 at 15:49

John

5,02110 gold badges55 silver badges110 bronze badges

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

1 Comment

Manoj Maharana Over a year ago

Good Job John...I appreciate On your Work..Now My Code is Working Fine..Thanks For Your Valuable Time....

Collectives™ on Stack Overflow

Bind data and display datatable on aspx page using Jquery in asp.net on tbody

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related