数据表:在每行中显示复选框,并在选择该行时获取数据

时间:2018-06-20 18:58:10

标签: datatables

我在不同的网站上看到了很多例子,他们在其中解释和实现了它。但是我要寻找的东西什么都没有。

我有一个rest调用,该调用返回一个包含许多字段的JSON,但是我只想显示2个字段。所以我在脚本中添加了“ columns”。我想在每一行中显示行号。所以第一列应该是复选框,第二列应该是行号,然后是我的两列。我已经实现了显示行数字和我的2列,但是我没有得到如何在选择该行的第一列nd中显示复选框,而是获得该行的数据。

我发现的所有示例都显示了从其余调用/ JSON获取的所有列。因此他们没有在javascript中实现“列”。

DataTables 1.10.18

代码:

<script>
    $( document ).ready(function() {

         var programTable = $("#programTable").DataTable ({
              "ajax": {
                        url: "http://localhost:9081/getAllPrograms",
                        type: "GET",
                        dataSrc: "",
                        dataType: 'json'
                      },
              "columns" : [
                    { "title": "#", "data" : null },
                    { "title": "Program Id", "data" : "programId" },
                    { "title": "Program Name", "data" : "programName" }
                ],
                "columnDefs": [ {
                    "searchable": false,
                    "orderable": false,
                    "targets": 0,
                    "className": "dt-body-center",
                    "render": function (data, type, full, meta){
                        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
                    }
                }],
                "select": {
                    style:    'os',
                    selector: 'td:first-child'
                },
                "order": [[ 1, 'asc' ]]
        });

        programTable.on( 'order.dt search.dt', function () {
            programTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();  

    });
</script>

        <table id="programTable" class="display" width="100%">
            <thead>
                <tr>
                    <th><input type="checkbox" name="select_all" value="1" id="example-select-all"></th>
                    <th></th>
                    <th>Program Id</th>
                    <th>Program Name</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

enter image description here

0 个答案:

没有答案