我在不同的网站上看到了很多例子,他们在其中解释和实现了它。但是我要寻找的东西什么都没有。
我有一个rest调用,该调用返回一个包含许多字段的JSON,但是我只想显示2个字段。所以我在脚本中添加了“ columns”。我想在每一行中显示行号。所以第一列应该是复选框,第二列应该是行号,然后是我的两列。我已经实现了显示行数字和我的2列,但是我没有得到如何在选择该行的第一列nd中显示复选框,而是获得该行的数据。
我发现的所有示例都显示了从其余调用/ JSON获取的所有列。因此他们没有在javascript中实现“列”。
DataTables 1.10.18
代码:
<script>
$( document ).ready(function() {
var programTable = $("#programTable").DataTable ({
"ajax": {
url: "http://localhost:9081/getAllPrograms",
type: "GET",
dataSrc: "",
dataType: 'json'
},
"columns" : [
{ "title": "#", "data" : null },
{ "title": "Program Id", "data" : "programId" },
{ "title": "Program Name", "data" : "programName" }
],
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0,
"className": "dt-body-center",
"render": function (data, type, full, meta){
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"select": {
style: 'os',
selector: 'td:first-child'
},
"order": [[ 1, 'asc' ]]
});
programTable.on( 'order.dt search.dt', function () {
programTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
});
</script>
<table id="programTable" class="display" width="100%">
<thead>
<tr>
<th><input type="checkbox" name="select_all" value="1" id="example-select-all"></th>
<th></th>
<th>Program Id</th>
<th>Program Name</th>
</tr>
</thead>
<tbody></tbody>
</table>