jQuery DataTable自定义过滤
这是我的jQuery数据表。我的表中需要一个alphbetical过滤器。我使用ajax方法从数据库中过滤数据。但我有一些问题。 当我过滤数据时，显示结果条目＆＃34;在jQuery数据表中不会根据我的过滤更改。 如果有任何其他想法改变过滤。
table.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resources/css/dataTables.bootstrap.min.css">
<script src="resources/js/jquery-1.11.3.min.js"></script>
<script src="resources/js/dataTables.bootstrap.min.js"></script>
<title>SMART CAMPUS</title>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading text-center" id="header">
Customer Details
</div>
<div class="panel-body">
<div class="well" id="well">
<form role="form" action="" method="post" class="form-horizontal" id="myForm">
<table class=" display nowrap table table-bordered " id="myTable">
<thead id="th">
<tr>
<th class="text-center">Select</th>
<th class="text-center">Customer Name</th>
<th class="text-center">Storage Location</th>
<th class="text-center">Location</th>
<th class="text-center">Customer Address</th>
</tr>
</thead>
<tbody>
<c:forEach var="row" items="${result}">
<tr id="odd">
<td><input type="checkbox" name="checkId" class ="checkId" id="checkId" value=${row.id }>${row.id }</td>
<td class="text-center">${row.name }</td>
<td class="text-center">${row.storage }</td>
<td class="text-center">${row.location }</td>
<td class="text-center">${row.address }</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="col-md-offset-1">
<ul class="pagination" id="filterButton">
<li><a href="#" onclick="loadEquipementModelStartwith('0')">All</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('A')">A</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('B')">B</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('C')">C</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('D')">D</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('E')">E</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('F')">F</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('G')">G</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('H')">H</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('I')">I</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('J')">J</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('K')">K</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('L')">L</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('M')">M</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('N')">N</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('O')">O</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('P')">P</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('Q')">Q</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('R')">R</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('S')">S</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('T')">T</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('U')">U</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('V')">V</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('W')">W</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('X')">X</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('Y')">Y</a></li>
<li><a href="#" onclick="loadEquipementModelStartwith('Z')">Z</a></li>
</ul>
</div>
<a class="btn btn-success col-md-offset-5" href="add"><span class="glyphicon glyphicon-plus"></span>Add</a>
<a class="btn btn-warning" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</a>
<a class=" btn btn-danger" onclick="delete_validate()" id="delete"><span class="glyphicon glyphicon-remove"></span>Delete</a>
</form>
<!-- <button class="btn-primary" id="filterButton">Filter</button>-->
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>
//For DataTable
$(document).ready(function() {
$('#myTable').DataTable( {
});
function callAjaxMethod(type,url,param,successMethod)
{
try
{
$.ajax({
url:url,
type:type,
data:param,
success:function(result)
{
successMethod(result);
}
});
}
catch(err)
{
alert(err)
}
}
//Loading data
/* This function used for sorting based on the letter */
function loadEquipementModelStartwith(letter)
{
try
{
var param = {"startLetter":letter};
callAjaxMethod("POST","sortEquipmentModel",param,startwithEquipmentModel);
}
catch(err)
{
alert(err);
}
}
function startwithEquipmentModel(result)
{
try
{
alert(result.length);
var rowLength = result.length;
var content="";
var id,name,storage,location,address;
if(rowLength === 0)
{
content += "<tr><td colspan='4' class = 'star'><center><b> Data not found...</b></center></td></tr>";
}
else
{
for (var index = 0;index<rowLength;index++)
{
try
{
id = result[index].id;
name = result[index].name;
storage = result[index].storage;
location = result[index].location;
address = result[index].address;
content += "<tr>";
content += "<td>"+(index+1)+". <input type='checkbox' name='equTypeId' class ='checkList' value= '"+id+"'></td>";
content += "<td>"+name+"</td>";
content += "<td>"+storage+"</td>";
content += "<td>"+location+"</td>";
content += "<td>"+address+"</td>";
content += "</tr>";
}
catch(err)
{
alert(err.desc);
}
}
}
$('#myTable tbody').html(content);
}
catch(err)
{
alert(err.desc);
}
}
</script>
</body>
</html>
UsersDAO.java
public List<Users> sortData(String letter)
{
String sql= "";
sql = "SELECT id a, name b ,storage c ,location d ,address e from customer where name is not null";
if(!"0".equals(letter))
sql += " AND name LIKE '"+letter+"%'";
System.out.println(sql);
return jdbc.query(sql,new listRowMapper());
}
private static final class listRowMapper implements RowMapper<Users>
{
public Users mapRow(ResultSet rs,int rowNum)throws SQLException
{
Users user=new Users();
user.setId(rs.getInt(1));
user.setName(rs.getString(2));
user.setStorage(rs.getString(3));
user.setLocation(rs.getString(4));
user.setAddress(rs.getString(5));
return user;
}
}
controller.java
@RequestMapping(value = "/sortEquipmentModel",method = RequestMethod.POST)
@ResponseBody
public List<Users> sortData(@RequestParam Map<String,String> request,Model model)
{
String startwith = request.get("startLetter");
List<Users> users = userdao.sortData(startwith);
Collections.sort(users,new Comparator<Users>(){
@Override
public int compare(Users s1, Users s2) {
// TODO Auto-generated method stub
return s1.getName().compareToIgnoreCase(s2.getName());
}
});
System.out.println(users.isEmpty());
System.out.println(users.size());
System.out.println(users);
return users;
}
答案 0 :(得分：0)
您不需要为此目的使用ajax。只需使用bootstrap表和Data table。它会自动添加过滤器，分页，排序 参考这个for full description html喜欢
<table cellpadding="0" cellspacing="0" border="0" class="bordered-table zebra-striped dataTable no-footer" id="example" role="grid" aria-describedby="example_info">
//rows here
</table>
jquery
if($('#example').length > 0)
{
landing_table = $('#example').DataTable
({
"bJQueryUI": false,
"bAutoWidth": true,
"iDisplayLength": 5,
"sPaginationType": "full_numbers",
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"sDom": '<"datatable-header"fl>t<"datatable-footer"ip>',
"oLanguage":
{
"sLengthMenu": "<span>Show entries:</span> _MENU_"
},
"stateSave": true,
"stateDuration": 60 * 60 * 24,
"aaSorting": [[ 0, "desc" ]],
});
}