Javascript 如何通过ajax和jquery在datatables中使用for循环为每行添加按钮

Javascript 如何通过ajax和jquery在datatables中使用for循环为每行添加按钮,javascript,jquery,ajax,spring-mvc,datatables,Javascript,Jquery,Ajax,Spring Mvc,Datatables,我想使用ajax函数为每一行添加按钮……我编写了一些代码,但效果不好。。按钮移出表格并查看页面底部的所有按钮。我想将这些按钮添加到datatables行。。。 我想使用for循环将abc按钮逐个添加到[object object]feild ajax和jquery <script> $(document).ready(function () { $("#searchArea").hide(); var uID = $("

我想使用ajax函数为每一行添加按钮……我编写了一些代码,但效果不好。。按钮移出表格并查看页面底部的所有按钮。我想将这些按钮添加到datatables行。。。 我想使用for循环将abc按钮逐个添加到[object object]feild

ajax和jquery

<script>
        $(document).ready(function () {
            $("#searchArea").hide();
            var uID = $("#userName").val();

            var tableProduct = $('#dataTbl').DataTable({
                "bSort": true
                , "oLanguage": {"sZeroRecords": "", "sEmptyTable": ""}
            });
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/restservice/App50/' + uID,
                success: function (result) {
                    var jString = JSON.stringify(result);
                    var jdata = JSON.parse(jString);

                    for (var x = 0; x < jdata.length; x++) {
                        var pa = $('#aaa');
                        var td1 = jdata[x].snumber;
                        var td2 = jdata[x].date;
                        var td3 = jdata[x].slsNo + " in " + jdata[x].slsiUnit;
                        var td4 = jdata[x].productDesc;
                        var td5 = jdata[x].status;
                        var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');
                        var td7 = "jdata[x].hsCode";
                        var td8 = "jdata[x].hsCode";
                        tableProduct.row.add([td1, td2, td3, td4, td5, td6, td7, td8]).draw(true);
                    }
                }

            });

        });
    </script>

$(文档).ready(函数(){
$(“#搜索区域”).hide();
var uID=$(“#用户名”).val();
var tableProduct=$('#dataTbl')。DataTable({
“bSort”:正确
,“oLanguage”:{“sZeroRecords”:“sEmptyTable”:“}
});
$.ajax({
键入:“GET”,
url:“${pageContext.request.contextPath}/restservice/App50/”+uID,
成功:功能(结果){
var jString=JSON.stringify(结果);
var jdata=JSON.parse(jString);
对于(var x=0;x
jsp跳线

<body>
        <div id="bootstrapCssTest" class="hidden"></div>
        <div id="bootstrapCssTest" class="hidden"></div>

        <div class="container">
            <div class="row headerRow1">
                <div class="col-md-12">
                    <jsp:include page="template/banner.jsp"/>
                </div>
            </div>
            <div class="row">
                <div class="authheader">
                    <%@include file="template/message.jsp" %>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <jsp:include page="template/header.jsp"/>
                </div>
                <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="well lead">List of Applications</div>
                        </div>
                    </div>
                    <div class="row">
                        <input type="hidden" id="userName" value="${userID}"/>
                        <input type="hidden" id="recentView" value="1"/>
                        <div class="panel panel-default">

                            <div id="ribbon">Search - <p id="viewSearchCategory" style="display: inline-block" >View Recent 50 Applications</p></div>
                            <div id="searchArea" class="well ">
                                <div class="row">
                                    VIEW RECENT
                                    <select id="viewNumbers" name="viewNumbers">
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="150">150</option>
                                        <option value="200">200</option>
                                        <option value="500">500</option>
                                        <option value="750">750</option>
                                        <option value="1000">1000</option>
                                    </select>
                                    APPLICATIONS
                                </div>
                            </div>
                            <!-- Default panel contents -->
                            <div style="overflow-x:auto;">
                                <table id="dataTbl" class="table table-bordered table-hover" style="font-size:13px;">
                                    <thead>
                                        <tr>
                                            <th width="10%">SLSI Entry No</th>
                                            <th width="10%">Application Posted in</th>
                                            <th width="30%">SLS No and Unit</th>
                                            <th width="30%">Product Description</th>
                                            <th width="10%">Status</th>
                                            <th class="hidden-print"></th>
                                            <th class="hidden-print"></th>
                                            <th class="hidden-print"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <p id="aaa"></p>
                        </div>
                    </div>                                   
                </div>
            </div> <jsp:include page="template/footer.jsp"/></div>
    </body>

申请表
搜索-

查看最近50个应用程序

查看最近的 50 100 150 200 500 750 1000 应用 SLSI条目号 申请表张贴于 SLS编号和单位 产品说明 地位

帮我个忙

您可以使用数据表的rows().every()属性

我给你举个例子

var table = $('#example').DataTable();

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this
    .child(
        $(
            '<tr>'+
                '<td><input type="button" value="new button"/></td>'+    
            '</tr>'
        )
    )
    .show();
} );
var table=$('#示例').DataTable();
table.rows().every(函数(rowIdx、tableLoop、rowLoop){
这
.孩子(
$(
''+
''+    
''
)
)
.show();
} );

这是一个示例代码。请根据您的要求进行更改。

代码中的问题是。您将按钮附加到表外的$(“#aaa”)上

换行

var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');
var td6=pa.append(“”);

var td6='';

这是一个基于代码的JSFIDLE示例:

添加按钮的最佳方法是在API级别的最后一个字段“${pageContext.request.contextPath}/restservice/App50/”+uID中准备按钮html
因此,当datatable不需要操作javascript返回的数据时。

您需要在行中显示所有数据。并且还显示表外的所有按钮?我需要显示一个用于循环的行的按钮。我不理解这条线,因为我是ajax和jquery的新手。如果你能修改我的线,请尝试替换var td6=pa.append(“”);对于var td6='只需尝试。。
var td6 = '<input type="button" class="btn btn-success" value="abc">';