如何将复选框添加到数据表

Question

我想把复选框放到数据表中，输出来自Json数组，并使用javascript在html表中显示这些数组元素。

我想为每一行添加一个复选框，以便于编辑、删除。

HTML 代码为：

<table id="example1" class="table table-bordered table-striped num-right-alignct">
    <thead>
        <tr>
            <th  style="text-align: center;">Ad Headline</th>
            <th  style="text-align: center;">Ad ID</th>
            <th  style="text-align: center;">Ad Description 1</th>
            <th  style="text-align: center;">Ad Description 2</th>
            <th  style="text-align: center;">URL Appeared</th>
            <th  style="text-align: center;">Clicks</th>
            <th  style="text-align: center;">CPC</th>
            <th  style="text-align: center;">Conversions</th>
            <th  style="text-align: center;">CTR %</th>
            <th  style="text-align: center;">Impressions</th>
            <th  style="text-align: center;">Avg Pos</th>
            <th  style="text-align: center;">Cost</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS代码：

$("#groupid").change(function(){
var oTable = $('#example1').dataTable();
var grpvalue=$('#groupid').val();
                $.ajax({
                type:"post", 
                dataType : 'json',
                url:"pages/ads.php", 
                data:"adgroup="+grpvalue, 
                success: function(s) {
                oTable.fnClearTable();
                for(var i = 0; i < s.length; i++) {
                    oTable.fnAddData([          
                        s[i]['hea']["0"],
                        s[i]['id']["0"],
                        s[i]['desc']["0"],
                        s[i]['desc2']["0"],
                        s[i]['url']["0"],
                        s[i]['cli']["0"],
                        s[i]['cpc']["0"],
                        s[i]['con']["0"],
                        s[i]['ctr']["0"],
                        s[i]['imp']["0"],

                        s[i]['ap']["0"],
                        s[i]['cost']["0"]
                        ]);
                        }
                        }
            });
});

而且 html 表格数据是动态的，我想为每一行添加一个复选框。请告诉我执行此操作的过程。

Answer 1

我试图向您展示我是如何解决我的问题的。这可能会对您有所帮助。我的数据表版本是：DataTables 1.10.0

HTML代码：

    <table  id="table_id">
    <thead ">
        <tr>
        <th>STM Name</th>
        <th>Physical Termination Prefix</th>
        <th>Media gateway Name</th>
        <th>Primary Megaco IP</th>
        <th>Primary Megaco Port</th>
        <th>Administrative Status</th>
        <th>Operational Status</th>
        <th>Select <input value="-1"   type="checkbox"></th>
        </tr>
    </thead>
    <tbody >
        <!--Table will generate here.-->

    </tbody>
    </table>

从服务器传递这样的响应：

{"aaData":[{"id":1,"name":"stm1","physicalTerminationPrefix":"pre","mediagatewayName":"mgw1","primaryMegacoIp":"192.19.0.1","primaryMegacoPort":4444,"actionStatus":1,"checkbox":"\u003cinput  type\u003d\u0027checkbox\u0027 value\u003d\u00271\u0027 /\u003e","idLink":"\u003ca href\u003d\u0027#\u0027 id\u003d\u00271\u0027\u003e1\u003c/a\u003e","nameLink":"\u003ca href\u003d\u0027#\u0027 id\u003d\u00271\u0027\u003estm1\u003c/a\u003e","administrativeStatus":"FRESH_ENTRY","operationalStatus":-1,"operationalStatusStr":"ACTIVE"}]}

像这样配置你的js：

    var oTable = $('#table_id').dataTable({
                "aoColumnDefs": [
                    {'bSortable': false, 'aTargets': [7]}
                ],
                "info": false,
                "bStateSave": true,
                "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
                pagingType: "simple",
                "oLanguage": {
                    "oPaginate": {
                        "sNext": '&gt',
                        "sLast": '&raquo',
                        "sFirst": '&laquo',
                        "sPrevious": '&lt'
                    },
                    "sEmptyTable": "No STM is Found !!!"
                },
                "aoColumns": [
                    //{"mData": "idLink"},
                    {"mData": "nameLink"},
                    {"mData": "physicalTerminationPrefix"},
                    {"mData": "mediagatewayName"},
                    {"mData": "primaryMegacoIp"},
                    {"mData": "primaryMegacoPort"},
                    {"mData": "administrativeStatus"},
                    {"mData": "operationalStatusStr"},
                    {"mData": "checkbox"}],
                "bProcessing ": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": 'data',
                        "success": function (data) {

                            oTable.fnClearTable();
                            if (data.aaData.length != 0)
                            {
                                oTable.fnAddData(data.aaData);
                                oTable.fnDraw();
                            }

                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert("Error Code: " + jqXHR.status + ", Type:" + textStatus + ", Message: " + errorThrown);
                        }
                    });
                }
            });

并在服务器中像这样准备您的 checkbox 列：

 var checkbox ="<input  type='checkbox' value='1' />";

这是我的示例输出：

Answer 2

为列定义定义它们 -

var oDataTable = j('#yourtableid').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "requestedage.php",
"aoColumns": [ 
              {"mData" : "ID"},
              {
                "mData": "Date",
                "mRender": function ( data, type, full ) {
                  return '<input type="checkbox" name="modifiedname" id="modifiedname"> Label';
                },
              }
            ],
 ..... //rest of the setting

datatypefull是传递给函数的参数。请参阅文档以了解有关传递参数的更多信息。