1 官网地址:http://www.datatables.net/

2 基本参数介绍 http://blog.csdn.net/mickey_miki/article/details/8240477 (这里已经介绍的很详细了)

如果要使用ajax请求数据的话应使用fnReloadAjax   官网上有插件 http://www.datatables.net/plug-ins/api

3 遇到的问题:服务数据返回格式,fnReloadAjax修改,调用fnReloadAjax,初始化datatable

服务返回数据格式:

         $re = $joinerObj->findAll($conditons);
if($re){
foreach($re as $k=>$v){
// $listArray['aaData'][$k]['joinerid'] ='<input type="checkbox" value="'.$v['joinerid'].'" name="shopId" delTag="delId">';
$listArray['aaData'][$k]['joinerid'] = "<input type='checkbox' value=".$v['joinerid']." name='delJoiner' delTag='delId' class='checkNetMusic' attr_aid=".$v['aid']."/>";
// $listArray['aaData'][$k]['aid'] = $v['aid'];
// $listArray['aaData'][$k]['appid'] = $v['appid'];
$listArray['aaData'][$k]['name'] = $v['name'];
$listArray['aaData'][$k]['tel'] = $v['tel'];
$listArray['aaData'][$k]['time'] = date('Y-m-d',$v['time']);
$listArray['aaData'][$k]['message'] = $v['message'];
$listArray['aaData'][$k]['company'] = $v['company'];
}
echo json_encode($listArray);
}else{
echo '{ "aaData": []}';
}

关于ReloadAjax的修改:

主要是修改这里

for ( var i=0 ; i<json.aaData.length ; i++ )
{
that.oApi._fnAddData( oSettings, json.aaData[i] );
}
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( sNewSource !== undefined && sNewSource !== null ) {
oSettings.sAjaxSource = sNewSource;
} // Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
this.fnDraw();
return;
} this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = []; this.oApi._fnServerParams( oSettings, aData ); oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings ); /* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )(json) : json;
for ( var i=0 ; i<json.aaData.length ; i++ )
{
that.oApi._fnAddData( oSettings, json.aaData[i] );
} oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); that.fnDraw(); if ( bStandingRedraw === true )
{
oSettings._iDisplayStart = iStart;
that.oApi._fnCalculateEnd( oSettings );
that.fnDraw( false );
} that.oApi._fnProcessingDisplay( oSettings, false ); /* Callback user function - for event handlers etc */
if ( typeof fnCallback == 'function' && fnCallback !== null )
{
fnCallback( oSettings );
}
}, oSettings );
}

初始化和调用:

aoColumnDefs 需要和服务器返回的列数以及table的head头的列数保持一致
发送ajax请求:registerMainTable.fnReloadAjax('produce.php?c=activitymanage&a=joinerInfo&appid='+appid+'&aid='+aid);
       var optsortable={
"bJQueryUI": true,
"aoColumns": [
{ "mDataProp": "joinerid" },
{ "mDataProp": "name" },
{ "mDataProp": "tel" },
{ "mDataProp": "time" },
{ "mDataProp": "message" },
{ "mDataProp": "company" }
],
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] },{ "bSortable": false, "aTargets": [ 1 ] },{ "bSortable": false, "aTargets": [ 2 ] },{ "bSortable": false, "aTargets": [ 3 ] },{ "bSortable": false, "aTargets": [ 4 ] },{ "bSortable": false, "aTargets": [ 5 ] }],
"sPaginationType": "full_numbers",
/*语言设置*/
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_条",
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "没有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
} }; var registerMainTable = $("#newsTable1").dataTable(optsortable);
$("#newsTable tbody a").live('click',function(){
$("#activitylist").css('display','none');
var aid = $(this).closest('a').attr('aid');
var appid = $("#appid").val();
registerMainTable.fnReloadAjax('produce.php?c=activitymanage&a=joinerInfo&appid='+appid+'&aid='+aid);
$("#details").css('display','block');
});

html页面中使用table

<table id="newsTable1"  width="100%" cellpadding="0" cellspacing="1" bgcolor="#999999">
<thead>
<tr class="ui-widget-header ">
<th><input type="checkbox" id="checkJoiner"/></th>
<th>姓名</th>
<th>电话</th>
<th>时间</th>
<th>留言</th>
<th>公司</th>
</tr>
</thead>
<tbody id="joinInfo"></tbody>
</table>

关于删除行的问题:需要使用oTable.fnDeleteRow();

比如:$.each(b,function(){oTable.fnDeleteRow(this)});

    function delJioner(){
var b=new Array();
var a=new Array();
var optsortable={bRetrieve:true,oLanguage:{sLengthMenu:"每页显示 _MENU_ 条",sZeroRecords:"没有数据。",sInfo:"_START_ / _END_ ,共 _TOTAL_ 条",sInfoEmpty:"没有记录。",sInfoFiltered:"(筛选自_MAX_条信息)",sSearch:"搜索:"},aoColumnDefs:[ { "bSortable": false, "aTargets": [ 0 ] },{ "bSortable": false, "aTargets": [ 1 ] },{ "bSortable": false, "aTargets": [ 2 ] },{ "bSortable": false, "aTargets": [ 3 ] },{ "bSortable": false, "aTargets": [ 4 ] },{ "bSortable": false, "aTargets": [ 5 ] }],};
var oTable=$("#newsTable1").dataTable(optsortable);
var appid = $('#appid').val(); $("input[delTag='delId']").each(function(){
if($(this).attr("checked")=="checked"){
a.push($(this).attr("value"));
b.push(this.parentNode.parentNode);
}
});
if(a.length==0){
alert("请选择条目!");
return
}
if(!confirm("确定要删除记录吗?")){
return false
}
$("#netNewsTabs").mask("请稍候...");
$.ajax({
type:"post",
url:"produce.php?c=activitymanage&a=delMultiJoiner&appid="+appid+"&delList="+a.toString(),
success:function(msg){
var data = eval(msg);
var err_code = data[0].err_code;
var err_msg = data[0].err_msg;
if(err_code != 0 )
{
alert(err_msg);
return false;
}else{
// $.each(b,function(){$(this).closest('tr').hide();});
$.each(b,function(){oTable.fnDeleteRow(this)});
alert(err_msg);
$("#netNewsTabs").unmask();
} },
error:function(){
alert("网络请求失败,请重试!");
$("#netNewsTabs").unmask();
}
})
}

使用jquery datatables插件遇到fnReloadAjax的问题的更多相关文章

  1. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  2. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  3. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

  4. jQuery DataTables 插件使用笔记

    初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...

  5. 黄聪:Jquery+DataTables插件,如何在ajax调用服务器数据后,自动给tr添加id属性

    http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...

  6. jQuery DataTables 获取选中行数据

    如题 想获取操作 DataTables 获取选中行数据 案1.主要是利用 js  getElementsByTagName 函数 然后对获取到的tr 进行操作  如下 function getChec ...

  7. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  8. jQuery 的插件 dataTables

    ---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...

  9. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

随机推荐

  1. 关于oracle 11g导出的dmp文件无法导入10g的问题

    今天遇到一个问题,由于无法远程11g是数据库服务器,只能用exp命令导出了一张表的dmp文件:在本地导入时遇到如下错误: IMP-00010: 不是有效的导出文件, 头部验证失败IMP-00000: ...

  2. 【CF652C】Foe Pairs(线性扫描)

    题意:给你1-n的一个排列和m组数对,问有多少区间不包含任意一个数对. (1 ≤ n, m ≤ 3·105) 思路:数据范围过大,不能用容斥原理 f[i]表示以位置i上的数为左端点,右端点最小到哪里 ...

  3. batch.bat explaination

    1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on|off}] [message] Sample篅echo of ...

  4. [LeetCode] Minimum Window Substring 散列映射问题

    题目: Given a string S and a string T, find the minimum window in S which will contain all the charact ...

  5. mybatis原理源码大牛连接

    mybatis讲解的非常好的连接: https://www.jianshu.com/nb/5226994 执行流程简介参考:http://www.cnblogs.com/dongying/p/4142 ...

  6. (5)html音频视频

    音频 1.互联网常用的音频格式 ogg 有损的音频压缩技术 免费的开源音频格式 它可以在相对较低的数据速率下实现比MP3更好的音质 mp3 有损的音频压缩技术 想使用MP3格式发布自己的作品,需要付给 ...

  7. HDU - 3664 Permutation Counting

    Discription Given a permutation a1, a2, … aN of {1, 2, …, N}, we define its E-value as the amount of ...

  8. Eclipse安装Spring工具套件

    前言: 安装spring工具套件是为了更快捷的使用spring,但是我觉得既然已经有了maven,工具套件其实不那么重要. 而且装好后我发觉没什么两样,只是新建bean文件时比较爽一点. 安装步骤: ...

  9. DELPHI 10.2 TOKYO搭建LINUX MYSQL开发环境

    DELPHI 10.2 TOKYO搭建LINUX MYSQL开发环境 笔者使用ubuntu64位LINUX 首先必须保证LINUX可以连互联网. 安装MYSQLsudo apt-get update ...

  10. 【hibernate】Hibernate中save, saveOrUpdate, persist, merge, update 区别

    Hibernate Save hibernate save()方法能够保存实体到数据库,正如方法名称save这个单词所表明的意思.我们能够在事务之外调用这个方法,这也是我不喜欢使用这个方法保存数据的原 ...