jquery将数据以table的形式显示,实现数据统计，分页，以及动态添加,搜索
2015-02-05 16:01
1096 查看
资料来源：https://datatables.net/examples/index
1、必备的文件：DataTables Js文件和CSS文件，下载地址：https://datatables.net/download/因为它是依赖于jquery的，因此还需要下载jquery库。
2、既然以table的形式显示，那么在HTML页面上我们就需要先定义格式良好的Table标签。必须有thead和tbody标签。如下所示，
步骤非常简单，然后将DataTables引入到具体的实例中。
前提：将session中的地址信息，显示到table中，并可以动态的添加。
实现关键词搜索
出现的问题：刷新之后可能会出现信息的重复累加，没有直接实现将信息插入第一行的功能，需要额外添加关键字，根据desc\asc实现该功能。
另一款不错的table插件：http://www.jtable.org/
1、必备的文件：DataTables Js文件和CSS文件，下载地址：https://datatables.net/download/因为它是依赖于jquery的，因此还需要下载jquery库。
2、既然以table的形式显示，那么在HTML页面上我们就需要先定义格式良好的Table标签。必须有thead和tbody标签。如下所示，
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>3、将上述提到的js文件和css文件包含到页面中。路径需要根据具体的情况，重新配置。<!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="/DataTables-1.10.4/media/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="/DataTables-1.10.4/media/js/jquery.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>4、然后直接在JavaScript中直接应用
$(document).ready( function () {
$('#table_id').DataTable();
} );步骤非常简单，然后将DataTables引入到具体的实例中。
前提：将session中的地址信息，显示到table中，并可以动态的添加。
<link rel="stylesheet" type="text/css" href="css/table/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/table/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
var t= $('#addressTable').DataTable();
var counter = 1;
$("#addRow").click(function() {
$("#wrap").fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($("#wrap").height() + 24) / 2;
var popMargLeft = ($("#wrap").width() + 24) / 2;
$("#wrap").css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
$('a.close, #mask,.continue').on('click', function() {
$('#mask , #wrap').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("#saveAddress").click(function() {
var name = $(".name").val();
var province = $(".province").val();
var city = $(".city").val();
var area = $(".area").val();
var details = $(".details").val();
var zipcode = $(".zipcode").val();
var telephone = $(".telephone").val();
var defaultAddress = $(".defaultAddress").val();
var flag="true";
$(".name").parent().next().text("");
$(".province").parent().next().text("");
$(".details").parent().next().text("");
$(".zipcode").parent().next().text("");
$(".telephone").parent().next().text("");
if (name == "" || name == undefined) {
$(".name").parent().next().text("姓名不能为空").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
}
if (province == null || province == 0 || city == null) {
$(".province").parent().next().text("请选择省份/直辖市").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
} else if (city == 0) {
$(".province").parent().next().text("请选择城市/区域").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
} else {
if (city != 0 && city != null && area == 0) {
$(".province").parent().next().text("请选择地区").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
}
}
if (details == "" || details == undefined) {
$(".details").parent().next().text("详细地址不能为空").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
}
if (zipcode == "" || zipcode == undefined) {
$(".zipcode").parent().next().text("邮编不能为空").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
}
if (telephone == "" || telephone == undefined) {
$(".telephone").parent().next().text("联系电话不能为空").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
} else {
if (isNaN(telephone)) {
$(".telephone").parent().next().text("请正确输入联系方式").css({
'font-size' : '12px',
'color' : 'red'
});
flag="false";
}
}
if(flag=="true")
{$.post("AddressServlet",
{"name":name,
"province":province,
"city":city,
"area":area,
"details":details,
"zipcode":zipcode,
"telephone":telephone,
"defaultAddress":defaultAddress
},function(returnedData,status){
var firstColumn="<input type='radio' name='addressradio' checked='checked'>";
var address=null;
var lastColumn=null;
if(defaultAddress==0)
{
lastColumn="<span class='linkspan'><a href='#' class='updateAddress' style='display:none'>修改</a> <a href='#' class='setDefaultAddress' style='display:none'>设置默认地址</a></span>";
}
else
{
lastColumn="<span class='linkspan'><a href='#' class='updateAddress' style='display:none'>修改</a></span>";
}
if(null!=area)
{
address=province+','+city+','+area+','+details+','+zipcode;
}
else
{
address=province+','+province+','+area+','+details+','+zipcode;
}
t.row.add( [
firstColumn,
address,
name,
telephone,
lastColumn
] ).draw();
$('#mask , #wrap').fadeOut(300, function() {
$('#mask').remove();
});
});
}
});
$(".defaultAddress .payRadio").click(function(){
if($(this).attr("checked")=="checked")
{
$(this).removeAttr("checked");
$(this).attr("value","0");
}else if($(this).attr("checked")==undefined)
{
$(this).attr("checked","checked");
$(this).attr("value","1");
}
});
......(省略若干代码)
......
<div>
<table id="addressTable" class="displayTable">
<thead>
<tr>
<th width="5%"></th>
<th width="55%"></th>
<th width="10%"></th>
<th width="10%"></th>
<th width="15%"></th>
</tr>
</thead>
<c:set var="i" value="0" />
<c:forEach var="info" items="${infoList}">
<c:set var="defaultAddress" value="${info.defaultAddress}" />
<c:set var="i" value="${i+1}" />
<c:if test="${i==1}">
<tbody>
<tr>
<td>
<input type="radio" name="addressradio" checked="checked">
</td>
<td>${info.address.province},${info.address.city},${info.address.area},${info.address.details},${info.address.zipcode}</td>
<td>${info.personName}</td>
<td>${info.telephone}</td>
<td class="orderlink"><span class="linkspan"><a href="#"
class="updateAddress">修改</a> <c:if test="${defaultAddress==false}">
<a href="#" class="setDefaultAddress">设为默认地址</a>
</c:if></span></td>
</tr>
</c:if>
<c:if test="${i!=1}">
<tr>
<td><input type="radio"
name="addressradio"></td>
<td> ${info.address.province},${info.address.city},${info.address.area},${info.address.details},${info.address.zipcode}</td>
<td>${info.personName}</td>
<td>${info.telephone}</td>
<td class="orderlink"><span class="linkspan"><a href="#" class="updateAddress">修改</a> <c:if
test="${defaultAddress==false}">
<a href="#" class="setDefaultAddress">设为默认地址</a>
</c:if></span></td>
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
</div>显示结果如下：实现关键词搜索
出现的问题：刷新之后可能会出现信息的重复累加，没有直接实现将信息插入第一行的功能，需要额外添加关键字，根据desc\asc实现该功能。
另一款不错的table插件：http://www.jtable.org/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现table动态添加行、删除行以及行的上移和下移
- 【Lucene】使用EasyUI和JQuery配合Lucene实现数据的分页查询以及高亮显示
- jquery实现table动态添加行、删除行以及行的上移和下移
- 【Lucene】使用EasyUI和JQuery配合Lucene实现数据的分页查询以及高亮显示
- jquery实现table动态添加行、删除行以及行的上移和下移
- 基于jQuery实现表格数据的动态添加与统计的代码
- Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
- 应用jQuery实现表格数据的动态添加与统计
- 应用jQuery实现表格数据的动态添加与统计
- 自己修改， jquery实现table动态添加行、删除行以及行的上移和下移
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 使用DataList和SQL2005实现分页显示数据（应用举例：站内简单搜索）
- jQuery+Ajax+PHP+Mysql实现分页显示数据
- jQuery+Ajax+PHP+Mysql实现分页显示数据
- JS实现table表格数据排序(可支持动态数据+分页效果)
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少，大多用在Form里
- 运用数据库来实现数据分页以及搜索问题
- 使用jquery为table动态添加行的实现代码