數據表未初始化columnFilter插件

Question

我已經有桌子了

<table id="currencies-table" class="table table-striped table-bordered table-hover form-data-table">
  <thead>
    <tr>
      <th style="width: 10px;"><input type="checkbox" class="group-checkable" data-set=".form-data-table .checkboxes" /></th>
      <th><spring:message code="label.name_pl"/></th>
      <th><spring:message code="label.name_en"/></th>
      <th><spring:message code="label.name_de"/></th>
      <th><spring:message code="label.code"/></th>
      <th><spring:message code="label.symbol" /></th>
      <th class="num-html-sort"><spring:message code="label.order" /></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <c:forEach var="currency" items="${model.currencies}">
      <tr class="odd gradeX">
        <td><sf:checkbox path="ids" class="checkboxes" value="${currency.id}"/></td>
        <td>${currency.name.pl}</td>
        <td>${currency.name.en}</td>
        <td>${currency.name.de}</td>
        <td>${currency.code}</td>
        <td>${currency.symbol}</td>
        <td class="center">
          <span class="move-arrow move-arrow-down" style="cursor:pointer"><i class="icon-arrow-down"></i></span>
          <span class="priority-order badge badge-inverse">${currency.priority}</span>
          <span class="move-arrow move-arrow-up" style="cursor:pointer"><i class="icon-arrow-up"></i></span>
        </td>
        <td><a href="<c:url value="/dictionaries/currencies/details.html?id=${currency.id}"/>" class="btn mini blue-stripe"><spring:message code="label.details"/></a></td>             
      </tr>
    </c:forEach>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>
</table>

這是初始化該表的腳本。

var defaultSettings = function() {
    return {
        "bStateSave": true,
        "bFilter": true,
        "aLengthMenu": [
            [5, 15, 20, -1],
            [5, 15, 20, Labels.getLabel('label.all')] // change per page values here
        ],
        "iDisplayLength": 15,
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sUrl": CommonsValues.datatable_lang_path()
        },
        "aoColumnDefs": [{
                'bSortable': false,
                'bSearchable': false,
                'aTargets': [0, 'no-sort']
            },
            {
                'bSortable': true,
                'aTargets': ['date-sort'],
                'sType': "date-pl"
            },
            {
                'bSortable': true,
                'aTargets': ['datetime-sort'],
                'sType': "date-euro"
            },
            {
                'sWidth': "100px",
                'aTargets': ['size100']
            },
            {
                'bSortable': true,
                'aTargets': ['numeric-sort'],
                'sType': "numeric"
            },
            {
                'bSortable': true,
                'aTargets': ['num-html-sort'],
                'sType': 'num-html'
            },
            {
                'bSortable': true,
                'bSearchable': true,
                'aTargets': ['rfq-sort'],
                'sType': "rfq",
                'mData': function(source, type, val) {
                    if (type === 'set') {
                        source.value = val;
                        source.value_display = val;
                        source.value_filter = val === "" ? "" : $.fn.dataTableExt.ofnSearch['rfq'](val);
                        return;
                    }
                    else if (type === 'display') {
                        return source.value_display;
                    }
                    else if (type === 'filter') {
                        return source.value_filter;
                    }
                    // 'sort', 'type' and undefined all just use the integer
                    return source.value;
                }
            },
            {
                'bSortable': true,
                'aTargets': ['offer-sort'],
                'sType': 'offer'
            },
            {
                'bSortable': true,
                'aTargets': ['price-sort'],
                'sType': 'price'
            }
        ],
        "fnDrawCallback": function(oSettings) {
            $('.group-checkable', oSettings.nTableWrapper).on('change', function() {
                var checked = $(this).is(":checked");
                $(oSettings.oInstance.fnGetNodes()).each(function() {
                    if (checked) {
                        $(this).find('.checkboxes').attr("checked", true);
                    } else {
                        $(this).find('.checkboxes').attr("checked", false);
                    }
                    $.uniform.update($(this).find('.checkboxes'));
                });
            }
            );
        }
    };
};
var settings = new defaultSettings();
            if ($(this).hasClass('expand-table')) {
                settings.sScrollX = "125%";
            }
            var dataTable = $(this).dataTable(settings).columnFilter({
                "sPlaceHolder": "head:after",
                "aoColumns": [
                    null,
                    null,
                    {type: "checkbox"},
                    {type: "checkbox"},
                    {type: "checkbox"},
                    null,
                    null,
                    null
                ]
            });

初始化后，即使其他功能（排序，主過濾，分頁）起作用，表也沒有用於過濾列的輸入。
表元素（thead，tbody，tfoot）在生成的html代碼中交換。

Answer 1

從提供的示例代碼中可以看到，我會說您忘記配置復選框過濾器的值。

關注者應該工作：

var dataTable = $(this).dataTable(settings).columnFilter({
            "sPlaceHolder": "head:after",
            "aoColumns": [
                null,
                null,
                {type: "checkbox", values: [ 'value used for filtering', 'displayed label text for checkbox']},
                {type: "checkbox", values: ['bemol', 'user']},
                {type: "checkbox", values: ['pl','Polish']},
                null,
                null,
                null
            ]
        });

另外，請嘗試檢查以下示例： 復選框示例