在tbody上的asp.net中使用Jquery绑定数据并在aspx页面上显示数据表

时间:2016-07-08 15:29:21

标签: jquery

这是我的HTML表格:

<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>

我已经使用jQuery绑定了HTML表。这是我的jQuery代码:

$(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");
        }
    });
});

我的问题是该表在<thead>而不是<tbody>具有约束力,这就是原因 jQuery分页,搜索,排序不起作用。我想在<tbody>绑定。我的代码出了什么问题?任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

你必须为孩子定义你想要的东西。有不同的替代

您应该用以下内容替换元素$("#example1")

$("#example1 tbody")

或者你也可以这样做:

$("#example1 > tbody")

您可以为您的tbody定义ID

<tbody id="myBody">

用jQuery获取它:

$("#myBody")

然后你可以这样做:

$("#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>");