DataTables插件分页
来源：互联网 发布：新媒体软件 编辑：程序博客网 时间：2024/05/19 09:47
第一种，前台分页
simple2.html
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"><title>DataTables example - Ajax data source (arrays)</title><link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"><link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../resources/demo.css"><style type="text/css" class="init"></style><script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script><script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script><script type="text/javascript" language="javascript" src="../resources/demo.js"></script><script type="text/javascript" language="javascript" >$(document).ready(function() {$('#example').dataTable( { "ajax":"data/objects.txt", "columns": [{ "data": "名称" },{ "data": "位置" },{ "data": "办公" },{ "data": "extn" },{ "data": "开始日期" },{ "data": "薪水" }],"bSort":true,//表头排序，为false，禁用排序，为true，使用排序，默认为true"searching":false,"blnfo":true,//页脚信息"bAutoWidth":true,//自动宽度columnDefs:[{orderable:false, //禁用排序targets:[0,1,2] //第一列，第二列，第三列都禁用排序}],"oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉， 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "尾页" }, "sZeroRecords": "没有检索到数据", "sProcessing": "<img src='./loading.gif' />" } } ); } );</script></head><body class="dt-example"><br/><br/><div class="container"><section><table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>名称</th><th>位置</th><th>办公</th><th>Extn.</th><th>开始日期</th><th>薪水</th></tr></thead></table></section></div></body> <script type="text/javascript"> function openWindow(url,data){ //设置模式窗口的一些状态值 var windowStatus = "dialogWidth:1000px;dialogHeight:700px;center:1;status:0;"; /* var data = { msg:"添加用戶", }; */ //将模式窗口返回的值临时保存 var temp = showModalDialog(url,data,windowStatus); if(tem!=''){return false;} }; </script> <script type="text/javascript" language="javascript">//给固定列添加click事件$(document).ready(function(){ $('#example tbody').on('mouseenter','tr', function () {var trs = $('#example tbody tr');//alert($('#example tbody tr').length);var flag = true;trs.each(function(){var tds = $(this).children();tds.each(function(){$(this).index();if($(this).index()==2){//alert($(this).text()); $(this).click(function(){openWindow("deep.html",{name:'ads'});flag =false;});}; });if(!flag){ return;}});} ); });</script></html>objects.txt
{ "data": [ { "名称": "Tiger Nixon", "位置": "System Architect", "薪水": "$320,800", "开始日期": "2011\/04\/25", "办公": "Edinburgh", "extn": "5421" }, { "名称": "Garrett Winters", "位置": "Accountant", "薪水": "$170,750", "开始日期": "2011\/07\/25", "办公": "Tokyo", "extn": "8422" }, { "名称": "Ashton Cox", "位置": "Junior Technical Author", "薪水": "$86,000", "开始日期": "2009\/01\/12", "办公": "San Francisco", "extn": "1562" }, { "名称": "Cedric Kelly", "位置": "Senior Javascript Developer", "薪水": "$433,060", "开始日期": "2012\/03\/29", "办公": "Edinburgh", "extn": "6224" }, { "名称": "Airi Satou", "位置": "Accountant", "薪水": "$162,700", "开始日期": "2008\/11\/28", "办公": "Tokyo", "extn": "5407" }, { "名称": "Brielle Williamson", "位置": "Integration Specialist", "薪水": "$372,000", "开始日期": "2012\/12\/02", "办公": "New York", "extn": "4804" }, { "名称": "Herrod Chandler", "位置": "Sales Assistant", "薪水": "$137,500", "开始日期": "2012\/08\/06", "办公": "San Francisco", "extn": "9608" }, { "名称": "Rhona Davidson", "位置": "Integration Specialist", "薪水": "$327,900", "开始日期": "2010\/10\/14", "办公": "Tokyo", "extn": "6200" }, { "名称": "Colleen Hurst", "位置": "Javascript Developer", "薪水": "$205,500", "开始日期": "2009\/09\/15", "办公": "San Francisco", "extn": "2360" }, { "名称": "Sonya Frost", "位置": "Software Engineer", "薪水": "$103,600", "开始日期": "2008\/12\/13", "办公": "Edinburgh", "extn": "1667" }, { "名称": "Jena Gaines", "位置": "办公 Manager", "薪水": "$90,560", "开始日期": "2008\/12\/19", "办公": "London", "extn": "3814" }, { "名称": "Quinn Flynn", "位置": "Support Lead", "薪水": "$342,000", "开始日期": "2013\/03\/03", "办公": "Edinburgh", "extn": "9497" }, { "名称": "Charde Marshall", "位置": "Regional Director", "薪水": "$470,600", "开始日期": "2008\/10\/16", "办公": "San Francisco", "extn": "6741" }, { "名称": "Haley Kennedy", "位置": "Senior Marketing Designer", "薪水": "$313,500", "开始日期": "2012\/12\/18", "办公": "London", "extn": "3597" }, { "名称": "Tatyana Fitzpatrick", "位置": "Regional Director", "薪水": "$385,750", "开始日期": "2010\/03\/17", "办公": "London", "extn": "1965" }, { "名称": "Michael Silva", "位置": "Marketing Designer", "薪水": "$198,500", "开始日期": "2012\/11\/27", "办公": "London", "extn": "1581" }, { "名称": "Paul Byrd", "位置": "Chief Financial 办公r (CFO)", "薪水": "$725,000", "开始日期": "2010\/06\/09", "办公": "New York", "extn": "3059" }, { "名称": "Gloria Little", "位置": "Systems Administrator", "薪水": "$237,500", "开始日期": "2009\/04\/10", "办公": "New York", "extn": "1721" }, { "名称": "Bradley Greer", "位置": "Software Engineer", "薪水": "$132,000", "开始日期": "2012\/10\/13", "办公": "London", "extn": "2558" }, { "名称": "Dai Rios", "位置": "Personnel Lead", "薪水": "$217,500", "开始日期": "2012\/09\/26", "办公": "Edinburgh", "extn": "2290" }, { "名称": "Jenette Caldwell", "位置": "Development Lead", "薪水": "$345,000", "开始日期": "2011\/09\/03", "办公": "New York", "extn": "1937" }, { "名称": "Yuri Berry", "位置": "Chief Marketing 办公r (CMO)", "薪水": "$675,000", "开始日期": "2009\/06\/25", "办公": "New York", "extn": "6154" }, { "名称": "Caesar Vance", "位置": "Pre-Sales Support", "薪水": "$106,450", "开始日期": "2011\/12\/12", "办公": "New York", "extn": "8330" }, { "名称": "Doris Wilder", "位置": "Sales Assistant", "薪水": "$85,600", "开始日期": "2010\/09\/20", "办公": "Sidney", "extn": "3023" }, { "名称": "Angelica Ramos", "位置": "Chief Executive 办公r (CEO)", "薪水": "$1,200,000", "开始日期": "2009\/10\/09", "办公": "London", "extn": "5797" }, { "名称": "Gavin Joyce", "位置": "Developer", "薪水": "$92,575", "开始日期": "2010\/12\/22", "办公": "Edinburgh", "extn": "8822" }, { "名称": "Jennifer Chang", "位置": "Regional Director", "薪水": "$357,650", "开始日期": "2010\/11\/14", "办公": "Singapore", "extn": "9239" }, { "名称": "Brenden Wagner", "位置": "Software Engineer", "薪水": "$206,850", "开始日期": "2011\/06\/07", "办公": "San Francisco", "extn": "1314" }, { "名称": "Fiona Green", "位置": "Chief Operating 办公r (COO)", "薪水": "$850,000", "开始日期": "2010\/03\/11", "办公": "San Francisco", "extn": "2947" }, { "名称": "Shou Itou", "位置": "Regional Marketing", "薪水": "$163,000", "开始日期": "2011\/08\/14", "办公": "Tokyo", "extn": "8899" }, { "名称": "Michelle House", "位置": "Integration Specialist", "薪水": "$95,400", "开始日期": "2011\/06\/02", "办公": "Sidney", "extn": "2769" }, { "名称": "Suki Burks", "位置": "Developer", "薪水": "$114,500", "开始日期": "2009\/10\/22", "办公": "London", "extn": "6832" }, { "名称": "Prescott Bartlett", "位置": "Technical Author", "薪水": "$145,000", "开始日期": "2011\/05\/07", "办公": "London", "extn": "3606" }, { "名称": "Gavin Cortez", "位置": "Team Leader", "薪水": "$235,500", "开始日期": "2008\/10\/26", "办公": "San Francisco", "extn": "2860" }, { "名称": "Martena Mccray", "位置": "Post-Sales support", "薪水": "$324,050", "开始日期": "2011\/03\/09", "办公": "Edinburgh", "extn": "8240" }, { "名称": "Unity Butler", "位置": "Marketing Designer", "薪水": "$85,675", "开始日期": "2009\/12\/09", "办公": "San Francisco", "extn": "5384" }, { "名称": "Howard Hatfield", "位置": "办公 Manager", "薪水": "$164,500", "开始日期": "2008\/12\/16", "办公": "San Francisco", "extn": "7031" }, { "名称": "Hope Fuentes", "位置": "Secretary", "薪水": "$109,850", "开始日期": "2010\/02\/12", "办公": "San Francisco", "extn": "6318" }, { "名称": "Vivian Harrell", "位置": "Financial Controller", "薪水": "$452,500", "开始日期": "2009\/02\/14", "办公": "San Francisco", "extn": "9422" }, { "名称": "Timothy Mooney", "位置": "办公 Manager", "薪水": "$136,200", "开始日期": "2008\/12\/11", "办公": "London", "extn": "7580" }, { "名称": "Jackson Bradshaw", "位置": "Director", "薪水": "$645,750", "开始日期": "2008\/09\/26", "办公": "New York", "extn": "1042" }, { "名称": "Olivia Liang", "位置": "Support Engineer", "薪水": "$234,500", "开始日期": "2011\/02\/03", "办公": "Singapore", "extn": "2120" }, { "名称": "Bruno Nash", "位置": "Software Engineer", "薪水": "$163,500", "开始日期": "2011\/05\/03", "办公": "London", "extn": "6222" }, { "名称": "Sakura Yamamoto", "位置": "Support Engineer", "薪水": "$139,575", "开始日期": "2009\/08\/19", "办公": "Tokyo", "extn": "9383" }, { "名称": "Thor Walton", "位置": "Developer", "薪水": "$98,540", "开始日期": "2013\/08\/11", "办公": "New York", "extn": "8327" }, { "名称": "Finn Camacho", "位置": "Support Engineer", "薪水": "$87,500", "开始日期": "2009\/07\/07", "办公": "San Francisco", "extn": "2927" }, { "名称": "Serge Baldwin", "位置": "Data Coordinator", "薪水": "$138,575", "开始日期": "2012\/04\/09", "办公": "Singapore", "extn": "8352" }, { "名称": "Zenaida Frank", "位置": "Software Engineer", "薪水": "$125,250", "开始日期": "2010\/01\/04", "办公": "New York", "extn": "7439" }, { "名称": "Zorita Serrano", "位置": "Software Engineer", "薪水": "$115,000", "开始日期": "2012\/06\/01", "办公": "San Francisco", "extn": "4389" }, { "名称": "Jennifer Acosta", "位置": "Junior Javascript Developer", "薪水": "$75,650", "开始日期": "2013\/02\/01", "办公": "Edinburgh", "extn": "3431" }, { "名称": "Cara Stevens", "位置": "Sales Assistant", "薪水": "$145,600", "开始日期": "2011\/12\/06", "办公": "New York", "extn": "3990" }, { "名称": "Hermione Butler", "位置": "Regional Director", "薪水": "$356,250", "开始日期": "2011\/03\/21", "办公": "London", "extn": "1016" }, { "名称": "Lael Greer", "位置": "Systems Administrator", "薪水": "$103,500", "开始日期": "2009\/02\/27", "办公": "London", "extn": "6733" }, { "名称": "Jonas Alexander", "位置": "Developer", "薪水": "$86,500", "开始日期": "2010\/07\/14", "办公": "San Francisco", "extn": "8196" }, { "名称": "Shad Decker", "位置": "Regional Director", "薪水": "$183,000", "开始日期": "2008\/11\/13", "办公": "Edinburgh", "extn": "6373" }, { "名称": "Michael Bruce", "位置": "Javascript Developer", "薪水": "$183,000", "开始日期": "2011\/06\/27", "办公": "Singapore", "extn": "5384" }, { "名称": "Donna Snider", "位置": "Customer Support", "薪水": "$112,000", "开始日期": "2011\/01\/25", "办公": "New York", "extn": "4226" } ]}在jsp中的应用：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html><html><head><meta charset="utf-8"><!-- <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> --><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"><title>分页插件</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/resources/css/datatables/jquery.dataTables.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/resources/css/datatables/shCore.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/resources/css/datatables/demo.css"><style type="text/css" class="init"></style><script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery-1.11.2.js"/>"></script><script type="text/javascript" language="javascript" src="<c:url value="/resources/js/datatables/jquery.dataTables.js"/>"></script><script type="text/javascript" language="javascript" src="<c:url value="/resources/js/datatables/shCore.js"/>"></script><script type="text/javascript" language="javascript" src="<c:url value="/resources/js/datatables/demo.js"/>"></script><script type="text/javascript" language="javascript" >$(document).ready(function() {$('#example').dataTable( { "ajax":"<c:url value='/resources/data/objects.txt'/>", "columns": [{ "data": "名称" },{ "data": "位置" },{ "data": "办公" },{ "data": "extn" },{ "data": "开始日期" },{ "data": "薪水" }],"bSort":true,//表头排序，为false，禁用排序，为true，使用排序，默认为true"searching":true,"blnfo":true,//页脚信息"bAutoWidth":true,//自动宽度columnDefs:[{orderable:false, //禁用排序targets:[0,1,2] //第一列，第二列，第三列都禁用排序}],"oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉， 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sSearch":"检索:","oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "尾页" }, "sZeroRecords": "没有检索到数据", "sProcessing": "<img src='./loading.gif' />" } } ); } );</script></head><body class="dt-example"><br/><br/><div class="container"><section><table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>名称</th><th>位置</th><th>办公</th><th>Extn.</th><th>开始日期</th><th>薪水</th></tr></thead></table></section></div></body> <script type="text/javascript"> function openWindow(url,data){ //设置模式窗口的一些状态值 var windowStatus = "dialogWidth:1000px;dialogHeight:700px;center:1;status:0;"; /* var data = { msg:"添加用戶", }; */ //将模式窗口返回的值临时保存 var temp = showModalDialog(url,data,windowStatus); if(tem!=''){return false;} }; </script> <script type="text/javascript" language="javascript">//给固定列添加click事件$(document).ready(function(){ $('#example tbody').on('mouseenter','tr', function () {var trs = $('#example tbody tr');//alert($('#example tbody tr').length);trs.each(function(){var tds = $(this).children();tds.each(function(){if($(this).index()==2){$(this).wrap("<a href = 'javascript:void(0);'></a>");}; });});var flag = true;trs.each(function(){var tds = $(this).children();tds.each(function(){if($(this).index()==2){ $(this).click(function(){ var td_content = $(this).text(); openWindow("<c:url value="/views/datatables/deep.jsp"/>",{name:'ads',tdc:td_content});flag =false;return flag;});}; }); }); } ); });</script></html> 0 0
- DataTables插件分页
- DataTables前端分页插件使用
- 插件介绍: DataTables 表格分页
- jQuery DataTables插件自定义Ajax分页实现
- 关于 Jquery Datatables 分页插件如何摆在左下角
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
- jQuery DataTables插件分页允许输入页码跳转
- Datatables--一个有意思的自动分页和排序的插件
- jquery插件dataTables（dataTables在显示表格的时候，果然是个好东西,支持排序/搜索/分页/...）
- datatables的服务器分页
- JS----dataTables分页排序
- springmvc+datatables+mybatis分页
- datatables服务器端分页查询
- JS----dataTables分页排序
- DataTables分页表格
- Datatables 服务器端分页
- DataTables服务器端分页
- datatables pagehelper分页问题
- win7安装密钥
- tar.bz2怎么安装，tar.gz怎么安装
- Android简单的天气预报
- 黑马程序员--java基础--异常（二）
- What Doesn't Seem Like Work？ -- Paul Graham
- DataTables插件分页
- MFC invalidate FALSE和TRUE的区别
- linux安装软件详细解答 rpm tar.gz tar.z tar.bz2 tar.tgz .deb .bin
- listener 监听器
- Linux下如何解压文件
- 用百度MP3的API从网络下载歌曲的完整实现
- Leetcode 155: Mini Stack
- Linux上的一些命令
- linux内核设计与实现的读书笔记1 -内核开发头文件
