jquery datatable插件使用分享
2016-06-16 10:46
393 查看
这个插件很好用,筛选,分页等功能都是内置的了。重要的是根据自己的喜爱,变换它的css。
本文主要写个和ajax交互的小例子。
ajax_data.php
说明:
js与php交互使用的参数,其中一个比较特殊的是sEcho,这个参数需要以后原封不动地返回给页面。
由于默认是以$.getJSON发送请求,所以http命令是GET,参数是以url参数的方式传递的。
如果希望以POST命令,以json方式发送请求,而且要加上客户名称这个参数,所以这里需要做些修改。
DataTables通过fnServerData提供了这样一个接口,fnServerData是与服务器端交换数据时被调用的函数,默认实现是如上所说的通过getJSON发送请求,然后接收特定格式的json数据。
* sSearch是要搜索的词条
* 浏览器清除cookie以及其他网站和插件数据,之后就search为空,有可能是datatable插件数据缓存了。
ajax抛出的数组名必须是aaData,否则不会被填充到表格内
aaData必须是个二维数组。如果是一位数组,会竖向填充第一列,其他列都为空
类似这样的错误:DataTables warning(table_id='example'):Requested unknown parameter '4' from the data source for now 0;抛出的数据和表格的数据数量不符
$reAjaxData['aaData'] = array(
0=>array('1','2','3','4','6'),
1=>array('1','2','3','4','5')
);
//如果报错:DataTables warning(table_id='example'):Requested unknown parameter '0' from the data source for now 0,很有可能数组是关联数组导致的
//以下数组,关联数组不能展示数据到表格内
/*{
"aaData": [
{
"engine": "Trident",
"Browser": "Internet Explorer 4.0",
"Platform": "Win 95+",
"version": "4",
"grade": "C"
},
{
"engine": "Trident",
"Browser": "Internet Explorer 5.0",
"Platform": "Win 95+",
"version": "4",
"grade": "C"
}
]
}*/
对datatable对象参数进行部分配置以及说明
index.html
本文主要写个和ajax交互的小例子。
ajax_data.php
<?php //请求次数 $page = is_numeric($_POST['sEcho']) ? intval($_POST['sEcho']) : 0; //获取搜索框输入值 $search = trim($_POST['sSearch']) ? trim($_POST['sSearch']) : false; //获取每页数据条数 $pagesize = is_numeric($_POST['iDisplayLength']) ? intval($_POST['iDisplayLength']) : 0; //获取当前页起始数据的ID $offset = is_numeric($_POST['iDisplayStart']) ? intval($_POST['iDisplayStart']) : 0; //获取表格中执行排序的列号(每列都包括在内,从0开始) $sortcol = is_numeric($_POST['iSortCol_0']) ? intval($_POST['iSortCol_0']) : 0; //获取表格中执行排序的规则(asc,desc两者交替变换) $sortdir = trim($_POST['sSortDir_0']) ? trim($_POST['sSortDir_0']) : false; mysql_connect('主机名','用户名','密码'); mysql_select_db('testdrive'); $sql = "SELECT engine,Browser,Platform,version,grade FROM test_datatable"; $sql .= " where engine like '{$search}%' or Browser like '{$search}%'"; //根据iSortCol_0和sSortDir_0按对应字段排序 switch($sortcol){ case '0': $sql .= " order by engine {$sortdir}"; break; case '1': $sql .= " order by Browser {$sortdir}"; break; case '2': $sql .= " order by Platform {$sortdir}"; break; case '3': $sql .= " order by version {$sortdir}"; break; case '4': $sql .= " order by grade {$sortdir}"; break; default: break; } $sql .= " limit {$offset},{$pagesize}"; $result = mysql_query($sql); $data = array(); while( $array=mysql_fetch_assoc($result)){ $data[] = $array; } $sql_total = "select count(*) as count from test_datatable"; $sql_total .= " where engine like '{$search}%' or Browser like '{$search}%'"; $result_total = mysql_query($sql_total); $data_total = mysql_fetch_assoc($result_total); $reAjaxData['iTotalRecords'] = $data_total['count']; $reAjaxData['iTotalDisplayRecords'] = $data_total['count']; $aaData = array(); foreach($data as $key => $value ) { foreach( $value as $k => $v ) { $aaData[$key][] = $v; } } $reAjaxData['aaData'] = $aaData; echo json_encode($reAjaxData); exit; ?>
说明:
js与php交互使用的参数,其中一个比较特殊的是sEcho,这个参数需要以后原封不动地返回给页面。
由于默认是以$.getJSON发送请求,所以http命令是GET,参数是以url参数的方式传递的。
如果希望以POST命令,以json方式发送请求,而且要加上客户名称这个参数,所以这里需要做些修改。
DataTables通过fnServerData提供了这样一个接口,fnServerData是与服务器端交换数据时被调用的函数,默认实现是如上所说的通过getJSON发送请求,然后接收特定格式的json数据。
* sSearch是要搜索的词条
* 浏览器清除cookie以及其他网站和插件数据,之后就search为空,有可能是datatable插件数据缓存了。
ajax抛出的数组名必须是aaData,否则不会被填充到表格内
aaData必须是个二维数组。如果是一位数组,会竖向填充第一列,其他列都为空
类似这样的错误:DataTables warning(table_id='example'):Requested unknown parameter '4' from the data source for now 0;抛出的数据和表格的数据数量不符
$reAjaxData['aaData'] = array(
0=>array('1','2','3','4','6'),
1=>array('1','2','3','4','5')
);
//如果报错:DataTables warning(table_id='example'):Requested unknown parameter '0' from the data source for now 0,很有可能数组是关联数组导致的
//以下数组,关联数组不能展示数据到表格内
/*{
"aaData": [
{
"engine": "Trident",
"Browser": "Internet Explorer 4.0",
"Platform": "Win 95+",
"version": "4",
"grade": "C"
},
{
"engine": "Trident",
"Browser": "Internet Explorer 5.0",
"Platform": "Win 95+",
"version": "4",
"grade": "C"
}
]
}*/
对datatable对象参数进行部分配置以及说明
jQuery(document).ready(function() { //alert(typeof(jQuery().dataTable)); //alert('begin'); if (!jQuery().dataTable) { return; } $('#example').dataTable({ //paging:false; //设置paging选项,禁止表格分页(默认是打开的) //scrollY: 100; //在表格里使用滚动,你需要加上scrollY选项 //"sScrollY" : 450, //DataTables的高 //"sScrollX" : 820, //DataTables的宽 //"aaSorting" : [[2, "desc"]] "sPaginationType": "full_numbers", //分页风格,full_number会把所有页码显示出来 bFilter: true, //去掉搜索框 //对于从服务器端取数据,要指定以下两个参数bServerSide和sAjaxSource "bServerSide": true, //开启服务器模式,原始的静态页面不分页 //使用ajax源 "sAjaxSource": "ajax_data.php", /* 从 Ajax 源加载数据的表的内容 如果加"type": "POST",则使用post方式传递数据*/ //aoData是以post方式传递给php交互的key-value "fnServerData": function ( sSource, aoData, fnCallback ) { $.ajax( { "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback } ); }, "iDisplayLength": 5, //设置datatables的默认显示条数 //定义每页显示数据数量数组 "aLengthMenu": [ [5,10, 20, 30, 40, -1], [5,10, 20, 30, 40, "全部"] //每页变化值 ,默认显示最后一个元组 ], // 改变语言提示 把原始表示转换为中文 "oLanguage": { "sLengthMenu": "每页 _MENU_ 条记录", "sZeroRecords": "抱歉,没有找到", "sInfo": "从 _START_ 到 _END_ / 共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sSearch":"搜索:", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "尾页" }, "sProcessing": "<img src='loading.gif' />", }, }); });
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>DataTables live example</title> <style type="text/css"> @import "css/demo_page.css"; @import "css/demo_table.css"; </style> <script type="text/javascript" language="javascript" src="./jquery.js"></script> <script class="jsbin" src="./jquery.dataTables.nightly.js"></script> </head> <body id="dt_example"> <div id="container"> <h1>Live example</h1> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td colspan="5">等待加载数据... </td> </tr> </tbody> <tfoot> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </tfoot> </table> </div> <script> //$(document).ready(function() { // $('#example').dataTable(); //} ); </script> <script type="text/javascript" src="showlist.js"></script> </body> </html>
相关文章推荐
- C#实现Datatable排序的方法
- C#从DataTable获取数据的方法
- C#实现DataTable映射成Model的方法(附源码)
- C# DataTable使用方法详解
- C#实现从多列的DataTable里取需要的几列
- c# 如何将RadioButton与DataTable数据进行绑定
- C#实现DataTable转换成IList的方法
- C#使用DataSet Datatable更新数据库的三种实现方法
- C# DataTable的详细用法分享
- C#保存与读取DataTable信息到XML格式的方法
- C#中DataTable排序、检索、合并等操作实例
- C#中datatable序列化与反序列化实例分析
- 在ASP.NET 2.0中操作数据之六十八:为DataTable添加额外的列
- C#在DataTable中根据条件删除某一行的实现方法
- C#中DataTable删除行的方法分析
- C# datatable 不能通过已删除的行访问该行的信息处理方法
- C#编程实现DataTable添加行的方法
- DataSet与DataTable的区别示例介绍
- C#获取变更过的DataTable记录的实现方法
- asp.net实现数据从DataTable导入到Excel文件并创建表的方法