jquery datatable插件使用分享

最新推荐文章于 2021-09-30 20:37:48 发布

/fuwani

最新推荐文章于 2021-09-30 20:37:48 发布

阅读量2.4k

点赞数

分类专栏：前端语言 PHP 文章标签： datatable

本文链接：https://blog.csdn.net/u013405778/article/details/51690038

版权

PHP 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端语言

3 篇文章 0 订阅

订阅专栏

这个插件很好用，筛选，分页等功能都是内置的了。重要的是根据自己的喜爱，变换它的css。

本文主要写个和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>