第一种，前台分页
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>
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
