jquery.dataTables 按条件查询后重新生成表格点击排序还是原来的数据问题

最新推荐文章于 2024-03-24 09:37:08 发布

qq_17152035

最新推荐文章于 2024-03-24 09:37:08 发布

阅读量4.3k

点赞数

本文链接：https://blog.csdn.net/qq_17152035/article/details/77866086

版权

js 代码 vue+jq

$(document).ready(function() {
    logList();
});

var userArr = new Array();
function logList() {
    $.get("/oplog/logList",{cuser : cuser, time : time, module : module}, function (data) {
        if (data.code == 200) {
            logValue.options = data.data;
            logValue.$nextTick(function () {
                $.each(data.data,function (m,k) {
                    if ($.inArray(k.cuser, userArr) == -1) {
                        userArr.push(k.cuser);
                    }
                    $("#" + m).html(k.content);
                })
                userValue.options = userArr;
                $("#logtable").DataTable();
            })

        }
    })
}
$("#query").click(function () {

//关键代码 加上这个就没问题了$("#logtable").DataTable().destroy();

    $("#logtable").DataTable().destroy();
    getDate();
    logList();
})

比如初始界面table 显示6条内容

点击条件查找，生成新的表格，有3条数据。这时再点击排序，还是之前的6条表格数据，并且再点击查询会报Uncaught TypeError: Cannot read property 'removeChild' of null

也就是第二次查找时候

 $("#logtable").DataTable();还是初始时的表格对象，所以需要销毁原来的表格对象

$("#logtable").DataTable({
destroy : true
})或者$("#logtable").DataTable({
"bDestroy": true
})都是没效果的！
需要在生成新表格之前先销毁 $("#logtable").DataTable()对象
 $("#logtable").DataTable().destroy();

html:

<table id="logtable"
       class="footable table table-stripped table-bordered toggle-arrow-tiny"
       data-page-size="10">
    <thead>
    <tr>
        <th>序号
        </th>
        <th>时间
        </th>
        <th>操作者
        </th>
        <th>业务模块
        </th>
        <th>操作类型
        </th>
        <th>操作内容
        </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="value in options">
        <td>{{ $index + 1 }}</td>
        <td>{{ getEnabledTime(value.ctime) }}</td>
        <td>{{ value.cuser }}</td>
        <td v-if="value.module == 0">应用投放</td>
        <td v-else>广告投放控制-用户群体</td>
        <td v-if="value.type == 0">添加</td>
        <td v-else>编辑</td>
        <td width="500px" id="{{ $index }}"></td>
    </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>