数据表列过滤器不使用tfoot标记colspan(页脚)

时间:2016-06-18 12:45:58

标签: jquery html codeigniter datatable datatables

我正在尝试使用jquery.dataTables.columnFilter.js在DataTable中添加ColumnFilter,它成功生成了Filter。但是当我在表格中添加tfoot colspan时,它无效。

---------------------------------------------------------
ID  |   Name        |       Marks       |   Result      |
---------------------------------------------------------
1   |   A           |       100         |       Pass    |
1   |   B           |       90          |       Pass    |
1   |   C           |       80          |       Pass    |
1   |   D           |       100         |       Pass    |
1   |   E           |       70          |       Pass    |
1   |   F           |       59          |       Pass    |
---------------------------------------------------------
        Total       |       580         |               |
---------------------------------------------------------

实际上我想要以上类型的表但是当我把Tfoot放在ColSpan时它没有把Filter放在Result表上。 我的代码如下: -

HTML

<div class="form-group col-md-3">
    <label for="bragSection">Name</label>
    <div id="name"></div>
</div>

<div class="form-group col-md-3">
    <label for="bragSection">Result</label>
    <div id="result"></div>
</div>

<table id="show_countries_currencies" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Marks</th>
            <th>Result</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th colspan="2" style="text-align:right"></th>
            <th></th>
        </tr>
    </tfoot>
</table>

JAVASCRIPT

$(document).ready(function() {
dTable = $('#show_countries_currencies').dataTable({
            "oLanguage": {
                "sLengthMenu": "Display _MENU_ Records",
                "sZeroRecords": "<center>No Record Found!</center>",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ Records",
                "sInfoEmpty": "Showing 0 to 0 of 0 Records",
                "sInfoFiltered": "(filtered from _MAX_ total Records)",
            },
            "columns": [{
                    "width": "5%"
                }, {
                    "width": "5%"
                }, {
                    "width": "5%"
                }],
            bstateSave: true,
            responsive: true,
            bJQueryUI: false,
            bProcessing: true,
            bServerSide: true,
            sSearch: false,
            bFilter: true,
            iDisplayLength: 10,
            sAjaxSource:  "get_result.php",
            aoColumns: [{
                    "sName": "id",
                    "bSearchable": false,
                    "bSortable": true,
                    "className": "text-center tableIcon"
                }, {
                    "sName": "name",
                    "bSearchable": true,
                    "bSortable": true,
                    "className": "text-center tableIcon"
                }, {
                    "sName": "result",
                    "bSearchable": true,
                    "bSortable": true,
                    "className": "text-center tableIcon"
                }],
            aaSorting: [
                [0, 'desc']
            ]
        });
        $('#show_countries_currencies').dataTable().columnFilter({
            sRangeFormat: "<label class='dateRange1'>From</label> {from} <label class='dateRange2'>To</label> {to}",
            aoColumns: [null,{
                        type: "text",
                        sSelector : "#name"
                    },{
                    type: "select",
                    sSelector: "#result",
                    values: ["Pass","Fail"]
                }]
        });
});

0 个答案:

没有答案