How to add button for each row using for loop in datatables by ajax and jquery
Question
i want to add buttons for each row using ajax function...I code something but is not work well.. Buttons move out of the table and view all buttons in the bottom if the page.I want to add these buttons to datatables row... I want to add abc buttons one by one to [object Object] feild using for loop
ajax and jquery cord
<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>
jsp cord
<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>
help me someone
3 answers
solution1
1 ACCPTED 2017-12-04 06:01:45
The problem in your code is. You append the button to $("#aaa"), which is outside of table.
Change this line
var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');
To
var td6 = '<input type="button" class="btn btn-success" value="abc">';
And this is some jsfiddle example based on your code : https://jsfiddle.net/synz/zLykna0p/
solution2
0 2017-12-04 05:39:38
You can use rows().every() property of dataTable
i will show you one example
var table = $('#example').DataTable();
table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this
.child(
$(
'<tr>'+
'<td><input type="button" value="new button"/></td>'+
'</tr>'
)
)
.show();
} );
This is an example Code.Please Change as per your requirements.
solution3
0 2017-12-04 06:02:17
添加按钮的最佳方法是在API级别的最后一个字段中准备按钮html：'$ {pageContext.request.contextPath} / restservice / App50 /'+ uID，以便在数据表不需要处理返回的内容时来自javascript的数据。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.