数据表未初始化columnFilter插件

Question

I already have a table

<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>

This is the script that initializes this 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
                ]
            });

After initialization the table doesn't have the input for filtering columns even though other features works (sorting, main filtering, paging).
The table elements (thead,tbody,tfoot) are swapped in the resulting html code.

Answer 1

From what I can see from the provided example code I would say that you forgot to configure the values for the checkbox filters.

The followering should work:

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
            ]
        });

Also try checking this example out: Checkbox example