datatable的fnDestroy和fnClearTable的使用

datatable是jq的一个插件,具体的怎么使用以及各参数的作用官网都有,我就不说了。

当我们对一个table使用datatable初始化之后,我们改变了table的内容,然后想再次重新的对新的table进行初始化,那么我们该怎么做?

举一个例子:

我使用backbone写前端js代码:

var app.dt = {

sDom: ‘<"row"><"pull-right search"f>rt‘ +
  ‘<"row"<"col-sm-12"<"pull-left"i>‘ +
  ‘<"pull-left"l><"pull-right"p><"clearfix">>>D‘,
‘bProcessing‘: true,
‘bSort‘: false,
‘bRetrieve‘: true,
‘bLengthChange‘: true,
‘iDisplayLength‘: 10,
‘aLengthMenu‘: [10, 15, 20, 30],
‘bDestroy‘: true
};

var dttable = $(‘#example‘).datatable(app.dt);

初始化完成之后,我们得到了想要的效果,然后,我们往table里面加了一条记录,也就是加了一个tr,然后再对此table进行datatable初始化会发现是不起作用的,那么我们的table就会变形,

本来按要求分页好的记录会一次性全部显示在第一页。

so 我的解决办法是:

if ($(‘#example‘).hasClass(‘dataTable‘)) {
  dttable = $(‘#example‘).dataTable();
  dttable.fnClearTable(); //清空一下table
  dttable.fnDestroy(); //还原初始化了的datatable
}

//往$(‘#example‘)里面插入新的所有数据

if (app.xmCol.length !== 0) {
  app.xmCol.each(this.addOne, this);
}

$(‘#example‘).dataTable(app.dt);

这样处理之后无论我们对table进行增还是删,那么我们的datatable能正常显示和分页了。

纯属个人实践经验,如果你有其他方法,还望分享。

时间: 2024-08-12 13:01:57

datatable的fnDestroy和fnClearTable的使用的相关文章

jQuery DataTable-JavaScript API

虽然大多数时候你的Javascript交互将通过使用datatable初始化对象作为描述在使用这个网站的部分,有时,你会发现它有用一些外部控制表.可以使用以下函数从jQuery.dataTable对象. 也有一些插件API函数可用的扩展的功能之外的datatable内置函数描述这个页面. 注意对于那些使用服务器端处理:大量的API函数假设数据存储在客户端完成它,而不是在服务器端.这样的功能,比如fnAddData和 fnDeleteRow不会影响数据库的数据上举行.事实上datatable不知道

Table 分页处理

介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables.min.js(当然前面的加载 jquery.js文件):将其拉入html 前面. table_jui.css  和   jquery.dataTables.min.js 2:建表: 1 <table style="width: 100%; margin-bottom:8px; "

jQuery DataTable 删除数据后重新加载

问题描述: 利用jQuery Datatable和artTemplate组合来做的表格.但是当删除数据时,需要重新加载table里的数据.但是问题是datatable并没有直接的重新渲染,反而给数据累加上了. 解决办法: 经过查看高人的blog,发现可以先销毁table,然后再重新渲染. var dttable; App.globalAjax("get", "/Order/MyJsonList", {}, function (result) { var html =

dataTable如何重新初始化

http://www.imooc.com/wenda/detail/501197 第一次,第二次两次 数据不一样,列数也不等. 如下方法只能重新渲染两同列数的两次数据,如何处理不同列数的数据??? oldTable.fnClearTable(); //清空一下table oldTable.fnDestroy(); //还原初始化了的dataTable datatable不允许多次初始化,可以这样操作 if ($('#data-table').hasClass('dataTable')) { va

分享在MVC3.0中使用jQuery DataTable 插件

前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发

Datables wrning(table id=&#39;example&#39;):Cannot reinitialise DataTable.

出现的问题如下所示: 1 Datables wrning(table id='example'):Cannot reinitialise DataTable. To retrieve the 2 Datables object for this table,please pass eithser no arguments to the dataTable() function, 我查阅了网上的教程. 给出两种解决方式: 加 "bDestroy":true,和"bRetriev

最近在写后台管理平台,用到jQuery dataTable 一个比较实用的例子分享下

学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 1:导入包: URL:http://www.datatables.net/ 分别导入css和js文件 Html代码   <style type="text/css" title="currentStyle"> @import "css/dem

datatable刷新表头

使用jQuery的datatable生成表格数据,当需要改变表头时,调用Table.fnDestroy();再重新创建表头 var oTable = null; function initSettings() { var columns = []; $.ajax({ type : "post", url : "${ctx}/getDynamicColumns", dataType : "json", data : $("#query_f

datatable的使用【转】

习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 1:导入包: URL:http://www.datatables.net/ 分别导入css和js文件 Html代码   <style type="text/css" title="currentStyle"> @import "css/demo