Question

在我的项目中，我将数据从服务器端加载到数据表。第一次加载完全正常。但是当我更改<select> <option>值时，它会给我一个错误。

我有一个<select> <option>小组。因此，一旦我更改了选项，我需要删除当前内容并将不同的内容加载到表中。我从ajax调用中获取数据并加载到表中。我第二次更改选项时，它给了我这个错误。

DataTables警告：table id = example - 无法重新初始化DataTable。有关此错误的详细信息，请参阅http://datatables.net/tn/3

我检查了给出的网址，但对我来说没有好听的声音。

这是我的HTML，

<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%" style="background:#f3f3f3">
    <thead>
        <tr>
            <th><div class="heading">Title 01</div></th>
            <th><div class="heading">Title 02</div></th>
            <th><div class="heading">Title 03</div></th>
            <th><div class="heading">Title 04</div></th>
            <th><div class="heading">Title 06</div></th>
            <th><div class="heading">Title 07</div></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

以下是选择选项下拉列表

<select name="exampleSelect" id="exampleSelect" class="exampleSelect">
    <option id="exam1">value</option>
    <option id="exam2">value</option>
    <option id="exam3">value</option>
    <option id="exam4">value</option>
    <option id="exam5">value</option>
    <option id="exam6">value</option>
    <option id="exam7">value</option>
</select>

这是我的改变功能，

$('select#exampleSelect').on('change', function() {
    var sId = $(this).children(":selected").attr('id');
    loadedData(sId);
});

这是我的loadedData函数

function loadedData(sId) {
    var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "ajaxdata.json",
            "type": "POST"
        },
        "sScrollY": "300px",
        "scrollX":true,
        "paging": false,
        "bFilter": false,
        "bInfo": false,
        "searching": false,
        "bSort" : false,
        "fixedColumns":   true
    });
}

此处正在加载＆＃34; sId＆＃34;，加载数据正在改变

这是我的JSON数据

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        ["Airi", "Satou", "Accountant", "Tokyo", "28th Nov 08", "$162,700"],
        ["Angelica", "Ramos", "Chief Executive Officer (CEO)", "London", "9th Oct 09", "$1,200,000"],
        ["Ashton", "Cox", "Junior Technical Author", "San Francisco", "12th Jan 09", "$86,000"],
        ["Bradley", "Greer", "Software Engineer", "London", "13th Oct 12", "$132,000"],
        ["Brenden", "Wagner", "Software Engineer", "San Francisco", "7th Jun 11", "$206,850"],
        ["Brielle", "Williamson", "Integration Specialist", "New York", "2nd Dec 12", "$372,000"]
    ]
}

我需要根据select选项更改值将相关数据集附加到tbody。

有没有人有任何经验可以解决这个问题..？

Answer 1

您可以随时使用ajax请求发送参数，并强制数据表按需刷新数据，而不是尝试重新初始化数据表

因此，您的数据表初始化代码将类似于以下代码。

List<Integer>

您选择的更改事件将如下所示。

var table = $('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "ajaxdata.json",
        "type": "POST",
        "data": function ( d ) {
            d.filtervalue = $(this).children(":selected").attr('id'); // Ofcourse you can change this parametername as you want or add more parameters.
        }
    },
    "sScrollY": "300px",
    "scrollX":true,
    "paging": false,
    "bFilter": false,
    "bInfo": false,
    "searching": false,
    "bSort" : false,
    "fixedColumns":   true
});

Answer 2

它显示了该消息，因为它已经尝试初始化数据表，而该数据表已经存在于该表中。

如果数据表已存在（docs），您可以设置初始化选项以销毁数据表：

function loadedData(sId) {
    var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "ajaxdata.json",
            "type": "POST"
        },
        "sScrollY": "300px",
        "scrollX":true,
        "paging": false,
        "bFilter": false,
        "bInfo": false,
        "searching": false,
        "bSort" : false,
        "fixedColumns":   true,
        "destroy": true
    });
}

但在我看来，如果你能够，最好使用datatables api并更改ajax源。您可以使用像@Cerlin Boss＆＃39;这样的参数。回答，或者如果你想更改url数据表有一个ajax.url()方法（docs）。你已经在其他地方初始化了你的表并将其保存在table变量中：

$('select#exampleSelect').on('change', function() {
    var sId = $(this).children(":selected").attr('id');
    table.ajax.url( 'newData.json' ).load();
});

DataTables警告：table id = example - 无法重新初始化DataTable - jQuery

2 个答案: