Question

我需要在dataTable中添加一个复选框，我已经查看了dataTables.net上的示例，但无法使其工作。我知道我可以在带有渲染的表中添加一个输入框，所以它应该是类似的。我还尝试过JSFiddle和SO的几个例子。这是我到目前为止的内容，为简洁起见省略了一些细节。请放心，这是第六栏。正在通过ajax成功检索数据。表格显示，但第六列是空的，应该有一个复选框。我试过了https://datatables.net/extensions/select/examples/initialisation/checkbox.html

和

https://jsfiddle.net/gyrocode/07Lrpqm7/

  $('#table').DataTable({
"ajax": "http://localhost:8080/test/static/json/data.json",
"initComplete": function(){

    $("#datepicker-start").datepicker({
        dateFormat: 'mm-dd-yy',
        onSelect: function(dateText, inst) { 
            app.oldDate(dateText); 
        }
    }).datepicker("setDate", new Date(app.oldDate()));
},
"type": "GET",
"paging":false,
"language": {
    "emptyTable":"No Date."
},
"pageLength":-1,
"lengthMenu":[[5,10,25,-1], [5,10,25,"All"]],
"dom":'<"filterBox"f><"topi>rt<"bottom"lp><"clear">',
"columnDefs":[
 {
    "targets": 4,
    "data": null,
    "orderable": false,

}
,{
    "render": function(data){
        return "<input type='checkbox' checked: flag/>";
    },
    "targets": 6,
    "visible":true,
    "orderable": false,

}
,{
    "width": "30px",
    "render": function(data){
        return '<div id="arrow" class="glyphicon glyphicon-trash"></div>';
    },
    targets: 7
}
]
,"columns": [
{"data":"result"},
{"data":"assignedTo"},
{"data":"assignee"},
{"data":"startDate"},
{

    "data": "dueDate",
    "render": function(data){
        app.oldDate(data);
        return '<label for="datepicker-start" class="input-group-addon hide">Date</label>\
        <input type="text" id="datepicker-start" placeholder="Start Date" />\
         '
     },


    "orderable": false

    }
    ,{"data":"oldDate"},
    {
        "data":'' ,
        "orderable": false,
    }
    ,{
        "data":'' ,
        "orderable": false,
    }
    ]

}）; HTML：

<table>
    <thead>
        <th>Checkbox</th>
    </thead>
    <tbody>
    </tbody>
</table>

将复选框添加到数据表

0 个答案: