如何在jquery.datatables中显示复选框？

Question

我正在使用Datatables,我有以下代码来生成表.我想显示read,write,execute和admin值的复选框.如果该值等于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"]
] }

Answer 1

我能够使用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"
    });
});