CODEWITHSUNDEEP
jquery
Manoj Maharana
Manoj Maharana

Reputation: 145

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

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?

Upvotes: 0

Views: 1249

Answers (1)

John
John

Reputation: 4981

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

Upvotes: 1

Related Questions