如何將復選框添加到數據表

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

我試圖向您展示我如何解決我的問題。 這可能對您有幫助。 我的數據表版本是：數據表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);
                        }
                    });
                }
            });

並在服務器中准備您的復選框列，如下所示：

 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

data type full是傳遞給函數的參數。 請參閱文檔以了解有關傳遞的參數的更多信息。