14

私は Datatables を使用しており、テーブルを生成する次のコードがあります。読み取り、書き込み、実行、および管理値のチェックボックスを表示したい。値が 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"]
] }
4

1 に答える 1

23

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"
    });
});
于 2013-01-03T00:08:32.577 に答える