Javascript 如何在 jquery.datatables 中显示复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14128939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show checkboxes in jquery.datatables?
提问by user244394
I am using Datatables and I have the following code to generate the table. I want to display checkboxes for the read, write, execute and admin values. If the value is equal to 1 , I want the checkbox to be checked. and if 0 checkboxes unchecked.
我正在使用数据表，我有以下代码来生成表。我想显示读取、写入、执行和管理值的复选框。如果该值等于 1 ，我希望选中该复选框。如果未选中 0 个复选框。
Javascript
Javascript
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": "500px",
"bPaginate": false,
"bProcessing": true,
"sAjaxSource": "sources/sample.json"
} );
} );
</script>
HTML
HTML
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Browser</th>
<th width="25%">Read</th>
<th width="25%">Write</th>
<th width="15%">Execute</th>
<th width="15%">Admin</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JSON
JSON
{ "aaData": [
["Trident","0","0","0","1"],
["Trident","0","1","0","0"],
["Trident","0","0","1","1"],
["Trident","0","0","1","1"],
["Trident","0","0","1","1"],
["Trident","0","0","0","0"],
["Gecko","1","1","1","1"],
["Gecko","0","0","0","1"],
["Other browsers","1","0","0","U"]
] }
回答by user244394
I was able to get it to work using the datables mrenderer
我能够使用 datables mrenderer 让它工作
$(document).ready(function () {
var oTable = $('#example').dataTable({
"aoColumnDefs": [{
"aTargets": [0],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "Gecko") {
return '<a href="' + data + '">' + data + ' Download Gecko</a>';
} else {
return '<a href="' + data + '">' + data + ' Download</a>';
}
}
}, {
"aTargets": [1],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}, {
"aTargets": [2],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}, {
"aTargets": [3],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}, {
"aTargets": [4],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}],
"bFilter": false,
"sScrollY": "500px",
"bPaginate": false,
"bProcessing": true,
"sAjaxSource": "sources/sample.json"
});
});
