无法使用columnFilter重新初始化DataTable错误

Question

我正在尝试将Columnfilter添加到这段代码中：

$(document).ready(function() {
var table = $('#sampleOrderTable').DataTable( {
   dom: 'T<"clear">lfrtip',
   processing: true,
    serverSide: false,
    ajax: {
        "url": '<?php echo base_url(); ?>welcome/datatable',
        "type": "POST"

    },
    "tableTools": {
        "sSwfPath": '<?php echo base_url(); ?>assets/DataTables-1.10.4/extensions/TableTools/swf/copy_csv_xls_pdf.swf'
    },
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "RES_ID" },
        { "data": "PROP_NAME" },
        { "data": "RES_STATUS" },
        { "data": "RES_CHECK_IN" },
        { "data": "RES_CHECK_OUT" },
        { "data": "RES_N_ADULTS" },
        { "data": "RES_GUEST_FIRSTNAME" },
        { "data": "RES_GUEST_LASTNAME" },
        { "data": "BOOKING_SOURCE_LABEL" },
        { "data": "DATE_ADDED" },
        { "data": "IS_TRANSFER" },
        { "data": "IS_ARRIVED" },
    ],
    "order": [[1, 'asc']]

});
    $('#sampleOrderTable').dataTable({
     "bProcessing": true,
    }).columnFilter({
        aoColumns: [ 
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "date" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
            ]
    });

试图在第一个DataTable结束之前添加columnfilter，但一遍又一遍地得到这个错误。有人知道那里有什么问题吗？无法重新初始化DataTable错误

我试着这样做：

$(document).ready(function() {
var table = $('#sampleOrderTable').DataTable( {
   dom: 'T<"clear">lfrtip',
   processing: true,
    serverSide: false,
    ajax: {
        "url": '<?php echo base_url(); ?>welcome/datatable',
        "type": "POST"

    },
    "tableTools": {
        "sSwfPath": '<?php echo base_url(); ?>assets/DataTables-1.10.4/extensions/TableTools/swf/copy_csv_xls_pdf.swf'
    },
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "RES_ID" },
        { "data": "PROP_NAME" },
        { "data": "RES_STATUS" },
        { "data": "RES_CHECK_IN" },
        { "data": "RES_CHECK_OUT" },
        { "data": "RES_N_ADULTS" },
        { "data": "RES_GUEST_FIRSTNAME" },
        { "data": "RES_GUEST_LASTNAME" },
        { "data": "BOOKING_SOURCE_LABEL" },
        { "data": "DATE_ADDED" },
        { "data": "IS_TRANSFER" },
        { "data": "IS_ARRIVED" },
    ],
    "order": [[1, 'asc']]

 .columnFilter({
            aoColumns: [ 
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "date" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },

            ]

    });

});

但页面上没有任何事情发生..

Answer 1

尝试执行以下操作：

$(document).ready(function () {
    var table = $('#sampleOrderTable').DataTable({
        dom: 'T<"clear">lfrtip',
        processing: true,
        serverSide: false,
        ajax: {
            "url": '<?php echo base_url(); ?>welcome/datatable',
            "type": "POST"

        },
        "tableTools": {
            "sSwfPath": '<?php echo base_url(); ?>assets/DataTables-1.10.4/extensions/TableTools/swf/copy_csv_xls_pdf.swf'
        },
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            {"data": "RES_ID"},
            {"data": "PROP_NAME"},
            {"data": "RES_STATUS"},
            {"data": "RES_CHECK_IN"},
            {"data": "RES_CHECK_OUT"},
            {"data": "RES_N_ADULTS"},
            {"data": "RES_GUEST_FIRSTNAME"},
            {"data": "RES_GUEST_LASTNAME"},
            {"data": "BOOKING_SOURCE_LABEL"},
            {"data": "DATE_ADDED"},
            {"data": "IS_TRANSFER"},
            {"data": "IS_ARRIVED"}
        ],
        "order": [[1, 'asc']]
    }).columnFilter({
        aoColumns: [
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "date"},
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "text"},
            {type: "text"}

        ]

    });

});

Answer 2

使用以下方法管理以消除错误：

$(document).ready(function() {
var table = $('#sampleOrderTable').DataTable( {
   dom: 'T<"clear">lfrtip',
   processing: true,
    serverSide: false,
    ajax: {
        "url": '<?php echo base_url(); ?>welcome/datatable',
        "type": "POST"

    },
    "tableTools": {
        "sSwfPath": '<?php echo base_url(); ?>assets/DataTables-1.10.4/extensions/TableTools/swf/copy_csv_xls_pdf.swf'
    },
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "RES_ID" },
        { "data": "PROP_NAME" },
        { "data": "RES_STATUS" },
        { "data": "RES_CHECK_IN" },
        { "data": "RES_CHECK_OUT" },
        { "data": "RES_N_ADULTS" },
        { "data": "RES_GUEST_FIRSTNAME" },
        { "data": "RES_GUEST_LASTNAME" },
        { "data": "BOOKING_SOURCE_LABEL" },
        { "data": "DATE_ADDED" },
        { "data": "IS_TRANSFER" },
        { "data": "IS_ARRIVED" },
    ],
    "order": [[1, 'asc']]

});

    $('#sampleOrderTable').dataTable().columnFilter({
        aoColumns: [ 
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "date" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },
                 { type: "text" },

            ]

    });

不确定是否正确但现在可以正常使用。