Question

初始化数据表的代码，

jQuery('#table1').dataTable({
  "scrollY": "200px",
  "scrollCollapse": true,
  "paging": false,
  "aaSorting": [],
  "oSearch": {
    "bSmart": false
  }
});

首先初始化表时，过滤器工作正常。当使用ajax调用更新表数据时，搜索框会冻结（它没有接受任何输入）。数据表更新代码，

var table1 = jQuery('#table1');
result = [];
if (data.length) {
  jQuery.each(data, function(key, value) {
    json = ['<span id="hexa" class="' + value.carrier_code + '">' + value.company_web_name + '</span>', value.city, value.state];
    result.push(json);
  })
}
//console.log(result);
table1.dataTable().fnClearTable();
table1.dataTable().fnAddData(result);
table1.dataTable().fnDraw();

这里＆＃39;数据＆＃39;从ajax调用返回。排序工作正常，但搜索输入框在更新表后没有任何输入（第一次加载时工作正常）。

Answer 1

在初始化时始终创建对dataTable的引用，如下所示。

var table1 = $('#example').dataTable({...});

从现在开始，您可以将变量table1用于将来的引用，例如清除/添加/绘图表。看看下面的演示。

＆＃13;

var table1 = $('#example').dataTable({
    "scrollCollapse": true,
    "paging": false,
    "aaSorting": [],
    "oSearch": {
        "bSmart": false
    }
});

var result = [];
for ( var i=0; i< 10; i++ ) {
    var json = [
        '<span id="hexa" class="cc' + (i+1) + '">My Company ' + (i+1) + '</span>',
        "City" + (i+1),
        "State" + (i+1)
    ]
    result.push(json);
}

table1.fnClearTable(); // No dataTable() here
table1.fnAddData(result); // No dataTable() here
table1.fnDraw(); // No dataTable() here

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </tfoot>
    
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
        </tr>
    </tbody>
</table>

＆＃13;

更新

1 个答案: