解决DataTable表格插件，Ajax返回数据重新加载问题

前言：今天根据领导需求，小杰要想办法解决前台DataTable表格插件的Ajax返回数据后重新加载问题；我抱着君要臣想，臣不得不想的宗旨；让我在万能的百度上一顿狂扫，最终得以解决，真是不幸中的万幸；好了废话说完了，大家直接看解决思路吧。

解决思路：

1.移除原有的：$('#table_id').DataTable();

$("#table_id").dataTable().fnDestroy(); //移除table_id的dataTable插件

2.清空原有的$('#table_id')下的内容

$("#table_id").empty(); //清空原有的$('#table_id')下的内容

3.将新的数据添加到$('#table_id')下

$("#table_id").append(result); //将新的数据添加到$('#table_id')下

4.重新加载新的：$('#table_id').DataTable();

$("#table_id").dataTable(); //给table_id重新加载dataTable插件

注：大家可以根据自己的实际情况来进行改动，不需要完全照抄；如果出现js文件冲突，解决办法如下：

//在datatable上面增加，解决冲突
jQuery.noConflict();
$.noConflict();

//后续的datatable用jQuery开头调用格式
jQuery("#table_id").dataTable().fnDestroy();

如果怕用户等待时间长的话，可以加上一个页面Loading（加载）状态样式，也很简单：代码如下：

CSS：

<style type="text/css">
.current a {
    font-size: 20px;
}
.over {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    opacity:0.5;
    z-index: 1000;
}
.layout {
    display: none;
    position: absolute;
    top: 40%;
    left: 40%;
    width: 20%;
    height: 20%;
    z-index: 1001;
    text-align:center;
}
</style>

JS：

<script type="text/javascript">
function showLoading(sta){
    if (sta==1) { //需要加载时传1
        document.getElementById("over").style.display = "block";
        document.getElementById("layout").style.display = "block";
    }else{ //不需要加载时传2或者其他
        document.getElementById("over").style.display = "none";
        document.getElementById("layout").style.display = "none";
    }
}
</script>

HTML：

 <div id="over" class="over"></div>
 <div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div>

在想调用的地方直接：

showLoading(1); //显示

或

showLoading(2); //隐藏

就可以了。

结束语：要说的就这么多，希望能帮助到大家！