资料来源:https://datatables.net/examples/index
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/