紧急求助 jQuery dataTables初始化问题！！！有哪位老兄对dataTables熟悉，麻烦告知下！

「已注销」 2010-09-14 10:48:19


刚解决了一个问题，又出现一个...超级郁闷啊。。

我需要做的是一个查询页面，当点击 bind3 这个按钮时，把查询结果通过JSON赋值给 productTable 表格。第一次点击的时候情况还好，但当二次点击查询的时候，productTable 的数据就更新不了了，还是显示第一次的结果。通过跟踪JSon返回数据，JSON返回的都是最新的，就是用Datables的时候没有清空上次结果，绑定新的值，请问哪位前辈知道
Datatables如何给清空以前的数据啊？！谢谢了！！！
上代码




   $("#bind3").click(function(){

        $("#productTable tbody tr").remove();

        $("#load").show();

        $.ajax({

            type: "post",

            dataType: "json",

            url: "/include/pub_func.php", 

            data: "action=get_call_list&agentid=1001&days=3" ,

            

            success: function(msg){

               var data = msg.data;



		 //$("#productTable tr:gt(0)").remove();

 		 //$("#productTable tbody tr").remove();

		 var productData = msg.data;

		 var tbody="";var trs = "";

		 $.each(productData, function(index,n) {

					

			 trs += "<tr><td class='cs_test edit'>" + n.telno + "</td><td>" + n.id + "</td><td>" + n.telno + "</td><td>" + n.tel_name + "</td></tr>";



 				});

					 

		 $("#productTable").append(trs);               

	 

			   $('#productTable').dataTable( {

			  "bProcessing": true,

			   "bSortClasses": false,

  			   "bStateSave": false, //保存状态到cookie

			    "bJQueryUI": false,

			     "sPaginationType": "full_numbers",//分页样式

			     'iDisplayLength': 20,//每页显示个数

					"oLanguage": {

						"sProcessing": "正在加载数据...",

 						'sSearch': '数据查询:',

						"sLengthMenu": "显示 _MENU_ 条/页",

						"sZeroRecords": "没有符合条件的数据...",

						"sInfo": "显示 _START_ 至 _END_ 共 _TOTAL_ 条",

						"sInfoEmpty": "显示 0 至 0 共 0 条",

						"sInfoFiltered": "(_MAX_)"

					}

				});

				

            } 	 

        });

   });



<button id="bind3">读取7</button><br /><br />



<table id="productTable" border="0" cellspacing="0" width="100%" align="center">

  <thead>

    <tr>

      <th width="4%" ><input type="checkbox" /></th>

      <th width="11%" >客户名称</th>

      <th width="12%" >电话号码</th>

      <th width="12%">日期</th>

    </tr>

  </thead>

  <tbody>

    <tr id="">

      <td id="">1</td>

      <td id=""></td>

      <td id="">联系</td>

      <td id=""><</td>

    </tr>

  </tbody>

</table>

...全文
2599 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
zb0567 2011-08-20
  • 打赏
  • 举报
 回复
其实用不着这么麻烦，刚刚试验出来，对ajax请求进行限制缓存，easy解决~~
「已注销」 2010-09-19
  • 打赏
  • 举报
 回复
终于较完美的解决这个问题了。感谢各位的帮助，顺便发下解决方案，帮助下以后遇到此问题的兄弟姐妹们！







//初始化Datatable

var datatables = null;

function ListPages() {

	if (datatables == null) { //仅第一次检索时初始化Datatable

  		//添加单击选中行事件

			$("#data_table tbody").click(function(event) {

				$(datatables.fnSettings().aoData).each(function (){

					$(this.nTr).removeClass('row_selected');

				});

				$(event.target.parentNode).addClass('row_selected');

			});

	 	   

		   datatables=$('#data_table').dataTable( {

				"bProcessing": true,

				//"bStateSave": true, //保存状态到cookie

				//"bDestroy":true,

  				"sPaginationType": "full_numbers",//分页样式

				"oLanguage": {

					"sProcessing": "正在加载数据...",

					'sSearch': '数据筛选:',

					"sLengthMenu": "每页显示 _MENU_ 条记录",

					"sZeroRecords": "没有符合条件的数据...",

					"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",

					"sInfoEmpty": "显示 0 至 0 共 0 条",

					"sInfoFiltered": "(_MAX_)"

				}

				//设定是否参加排序

				,"aoColumns": [

  					{ "bSortable": false },null,null,null,null,null,null,null

 				] 

  

			});

			datatables.fnDeleteRow(0);//删除行		

   	} else{

   		 datatables.fnClearTable();

                 //updateDataTable(); 可以用此函数，但JSON的格式必须是官网要求的

                   //datatables.fnReloadAjax('examples/examples_support/json_source2.txt');官网要求的格式

   	}

   	datatables.fnDraw();

}

 

 

//重载入表格

 

function updateDataTable() {

    jQuery.getJSON("examples/examples_support/json_source2.txt", function(json) {

        datatables.fnAddData(json.aaData);

 

    });

}

 

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )

{

	if ( typeof sNewSource != 'undefined' && sNewSource != null )

	{

		oSettings.sAjaxSource = sNewSource;

	}

	this.oApi._fnProcessingDisplay( oSettings, true );

	var that = this;

	var iStart = oSettings._iDisplayStart;

	

	oSettings.fnServerData( oSettings.sAjaxSource, null, function(json) {

		/* Clear the old information from the table */

		that.oApi._fnClearTable( oSettings );

		

		/* Got the data - add it to the table */

		for ( var i=0 ; i<json.aaData.length ; i++ )

		{

			that.oApi._fnAddData( oSettings, json.aaData[i] );

		}

		

		oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

		that.fnDraw( that );

		

		if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )

		{

			oSettings._iDisplayStart = iStart;

			that.fnDraw( false );

		}

		

		that.oApi._fnProcessingDisplay( oSettings, false );

		

		/* Callback user function - for event handlers etc */

		if ( typeof fnCallback == 'function' && fnCallback != null )

		{

			fnCallback( oSettings );

		}

	} );

}





//处理函数





$("#go_search").click(function(){

	

	$("#data_table tbody tr").remove();

	$("#load").show();

 	 var agent_list="";

 	 $('#search_form input[name="agent_list"]').each(function(i){

		 if(this.checked){

			 //agent_list.push($(this).val());

			 agent_list+=$(this).val()+",";

		 }  

   	}); 

	if (agent_list!=""){agent_list=agent_list.substr(0,agent_list.length-1)}



   	$.ajax({

		type: "post", 

		dataType: "json", 

		url: "/include/pub_func.php",

		data:{

 			action:"get_record_list_search",

			agentid:<?php echo $_SESSION["agentid"]?>,

 			days:"3",

 			inout:"in",

			randoms:Math.random,

			callerid:$("#callerid").val(),

			calledid:$("#calledid").val(),

			begintime:$("#begintime").val(),

			endtime:$("#endtime").val(),

			agent_list:agent_list

  		},

		cache:false,

		beforeSend:function(){$('#load').show('100');},

		complete :function(){$('#load').hide('100');},

		success: function(msg){ 

		    var data = msg.data;

			

			if(msg.results.result=="yes"){	

			

				ListPages();  			

				var row_id,row_callerid,row_calledid,row_agentid,row_mdrfile,row_mdrlen,row_calltype,row_addtime;

				$.each(data, function(index,content){

 					

					row_id="<input type='checkbox' class='checkbox' value='"+content.id+"' name='data_id' />";

					row_callerid=content.callerid;

					row_calledid=content.calledid;

					row_agentid=content.agentid;

					row_mdrlen=content.mdrlen;

					row_calltype=content.calltype;

					if(content.mdrfile !== undefined && content.mdrfile!=""  && content.mdrfile!=null) 

					{	

						row_mdrfile="<a href=\"javascript:void(0)\" onclick=\"alertInfo('float_layer','"+content.mdrfile+"')\"> <img src=\"\/images/icon/play.png\" alt=\"录音播放\" /></a> <a href=\""+content.mdrfile+"\" target=\"_blank\"><img src=\"\/images/download.png\" alt=\"录音下载\"  /></a>";

					}else {

						row_mdrfile=".";

					}

					row_addtime=content.addtime;

					datatables.fnAddData([row_id,row_callerid,row_calledid,row_agentid,row_mdrfile,row_mdrlen,row_calltype,row_addtime]);

				});

		  

 			}else {

 				  //datatables=$('#data_table').dataTable( );

				  if(datatables){

					  datatables.fnClearTable()

				  }else{

					  var row_str="<tr id='ready'><td colspan=\"20\">"+msg.results.description+"</td></tr>"

					  $("#data_table").append(row_str);

				  }

  			}	 

				  

  		}

  		

  	});

});
「已注销」 2010-09-17
  • 打赏
  • 举报
 回复
算了，不用这个了！@~@！！#！#

发现数据量大的时候 比较卡。。
xwt799023 2010-09-15
  • 打赏
  • 举报
 回复
productTable.fnUpdate(0, 0); ,我以前用做更新数据时是这样用的
「已注销」 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 xwt799023 的回复:]
productTable.fnUpdate(0, 0);是不是应该这样一下就可以了
[/Quote]老兄，麻烦告知下，这句应该加在哪个位置呢？我试了 但提示报错。。。。
xwt799023 2010-09-15
  • 打赏
  • 举报
 回复
productTable.fnUpdate(0, 0);是不是应该这样一下就可以了
「已注销」 2010-09-15
  • 打赏
  • 举报
 回复


回复各位大虾，用了 $("#productTable").empty();之后 datatables.js 的6484行就报错了，说 asSorting 为空或不是对象...
这句我到底应该加在哪里合适啊？！
能否再帮我看下啊！谢谢了 谢谢了！
hoojo 2010-09-15
  • 打赏
  • 举报
 回复
[Quote=引用楼主 sea267 的回复:]
刚解决了一个问题，又出现一个...超级郁闷啊。。

我需要做的是一个查询页面，当点击 bind3 这个按钮时，把查询结果通过JSON赋值给 productTable 表格。第一次点击的时候情况还好，但当二次点击查询的时候，productTable 的数据就更新不了了，还是显示第一次的结果。通过跟踪JSon返回数据，JSON返回的都是最新的，就是用Datables的时候没有清空上次结果，绑定新……
[/Quote]

 $("#productTable").empty();
mrshelly 2010-09-15
  • 打赏
  • 举报
 回复
数据更新后. 要重新初始化 table
DataTables非jQuery初始化.rar
从v1.11开始，在不使用jQuery的情况下，可以通过新的DataTable（）构造函数初始化DataTables。 构造函数将返回一个DataTables API实例，允许对该表进行操作。虽然此构造函数不要求您编写任何jQuery代码，但DataTables仍将使用jQuery作为依赖项。
jquery dataTables及相关css
jquery dataTables两种版本 jquery两种版本 及相关css
jquery datatables 所需文件 官方下载的
官方下载 datatables所需包文件
DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)
使用JQuery.Datatables再也不用烦恼了，非常方便的集成插件，还是老外牛叉啊！
Datatables jquery表格插件
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能，包括排序、分页、扩展、主题、国际化等
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章