[英]How can add checkbox to the datatables
I want to put check box to the data table ,and the output is coming from Json array ,and displaying these array elements in html table using javascript. 我想在数据表中放置复选框,并且输出来自Json数组,并使用javascript在html表中显示这些数组元素。
and I want to add a checkbox to each and every row so that it can be easy to edit,delete. 我想在每一行中添加一个复选框,以便可以轻松地进行编辑,删除。
HTML Code is: HTML代码是:
<table id="example1" class="table table-bordered table-striped num-right-alignct">
<thead>
<tr>
<th style="text-align: center;">Ad Headline</th>
<th style="text-align: center;">Ad ID</th>
<th style="text-align: center;">Ad Description 1</th>
<th style="text-align: center;">Ad Description 2</th>
<th style="text-align: center;">URL Appeared</th>
<th style="text-align: center;">Clicks</th>
<th style="text-align: center;">CPC</th>
<th style="text-align: center;">Conversions</th>
<th style="text-align: center;">CTR %</th>
<th style="text-align: center;">Impressions</th>
<th style="text-align: center;">Avg Pos</th>
<th style="text-align: center;">Cost</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS code: JS代码:
$("#groupid").change(function(){
var oTable = $('#example1').dataTable();
var grpvalue=$('#groupid').val();
$.ajax({
type:"post",
dataType : 'json',
url:"pages/ads.php",
data:"adgroup="+grpvalue,
success: function(s) {
oTable.fnClearTable();
for(var i = 0; i < s.length; i++) {
oTable.fnAddData([
s[i]['hea']["0"],
s[i]['id']["0"],
s[i]['desc']["0"],
s[i]['desc2']["0"],
s[i]['url']["0"],
s[i]['cli']["0"],
s[i]['cpc']["0"],
s[i]['con']["0"],
s[i]['ctr']["0"],
s[i]['imp']["0"],
s[i]['ap']["0"],
s[i]['cost']["0"]
]);
}
}
});
});
And html table data is dynamic and I want to add a checkbox to each and every row.please let me know the procedure to do this. html表数据是动态的,我想在每一行中添加一个复选框。请让我知道执行此操作的过程。
I am trying to show you how I solved my problem. 我试图向您展示我如何解决我的问题。 This may help you. 这可能对您有帮助。 My Datatable version is : DataTables 1.10.0 我的数据表版本是:数据表1.10.0
Html Code: HTML代码:
<table id="table_id">
<thead ">
<tr>
<th>STM Name</th>
<th>Physical Termination Prefix</th>
<th>Media gateway Name</th>
<th>Primary Megaco IP</th>
<th>Primary Megaco Port</th>
<th>Administrative Status</th>
<th>Operational Status</th>
<th>Select <input value="-1" type="checkbox"></th>
</tr>
</thead>
<tbody >
<!--Table will generate here.-->
</tbody>
</table>
Pass response like this from the server: 从服务器传递这样的响应:
{"aaData":[{"id":1,"name":"stm1","physicalTerminationPrefix":"pre","mediagatewayName":"mgw1","primaryMegacoIp":"192.19.0.1","primaryMegacoPort":4444,"actionStatus":1,"checkbox":"\u003cinput type\u003d\u0027checkbox\u0027 value\u003d\u00271\u0027 /\u003e","idLink":"\u003ca href\u003d\u0027#\u0027 id\u003d\u00271\u0027\u003e1\u003c/a\u003e","nameLink":"\u003ca href\u003d\u0027#\u0027 id\u003d\u00271\u0027\u003estm1\u003c/a\u003e","administrativeStatus":"FRESH_ENTRY","operationalStatus":-1,"operationalStatusStr":"ACTIVE"}]}
configure your js like this: 像这样配置您的js:
var oTable = $('#table_id').dataTable({
"aoColumnDefs": [
{'bSortable': false, 'aTargets': [7]}
],
"info": false,
"bStateSave": true,
"lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
pagingType: "simple",
"oLanguage": {
"oPaginate": {
"sNext": '>',
"sLast": '»',
"sFirst": '«',
"sPrevious": '<'
},
"sEmptyTable": "No STM is Found !!!"
},
"aoColumns": [
//{"mData": "idLink"},
{"mData": "nameLink"},
{"mData": "physicalTerminationPrefix"},
{"mData": "mediagatewayName"},
{"mData": "primaryMegacoIp"},
{"mData": "primaryMegacoPort"},
{"mData": "administrativeStatus"},
{"mData": "operationalStatusStr"},
{"mData": "checkbox"}],
"bProcessing ": true,
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": 'data',
"success": function (data) {
oTable.fnClearTable();
if (data.aaData.length != 0)
{
oTable.fnAddData(data.aaData);
oTable.fnDraw();
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Error Code: " + jqXHR.status + ", Type:" + textStatus + ", Message: " + errorThrown);
}
});
}
});
and Prepare your checkbox column like this in the server: 并在服务器中准备您的复选框列,如下所示:
var checkbox ="<input type='checkbox' value='1' />";
Define them for column definitions - 为列定义定义它们-
var oDataTable = j('#yourtableid').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "requestedage.php",
"aoColumns": [
{"mData" : "ID"},
{
"mData": "Date",
"mRender": function ( data, type, full ) {
return '<input type="checkbox" name="modifiedname" id="modifiedname"> Label';
},
}
],
..... //rest of the setting
data
type
full
are the parameters passed to the function. data
type
full
是传递给函数的参数。 See the docs to know about more about the passed arguments. 请参阅文档以了解有关传递的参数的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.