jquery datatable插件使用分享

2024-09-06 11:48

本文主要是介绍jquery datatable插件使用分享,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这个插件很好用,筛选,分页等功能都是内置的了。重要的是根据自己的喜爱,变换它的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>



这篇关于jquery datatable插件使用分享的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141924

相关文章

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J