如何在jquery.datatable中显示复选框

How to show checkboxes in jquery.datatables?

本文关键字：显示复选框 datatable jquery 更新时间：2023-09-26

我正在使用datatable，我有以下代码来生成表。我想为读、写、执行和管理值显示复选框。如果值等于1，我希望复选框被选中。如果0个复选框未选中

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

<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

{ "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"]
] }

我能够得到它的工作使用数据渲染器

$(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"
    });
});