DataTables数据库分页 下载本文

在这个例子中被添加的属性映射到的列中的数据表的初始化调用aoColumns参数.

Servlet 实现

上述任何Java的服务器端组件,它接受的参数和返回预期的JSON结果可以用。在这个例子中,一个普通的servlet用于演示目的,但你可以使用任何其他组件。在这个例子中使用的servlet具有的doGet方法接受参数并返回一个JSON对象。下面的列表显示的get方法的一个例子:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

JQueryDataTableParamModelparam = DataTablesParamUtility.getParam(request); String sEcho = param.sEcho;

intiTotalRecords; // total number of records (unfiltered)

intiTotalDisplayRecords;//value will be set when code filters companies by keyword

//Filtering companies //Ordering companies //Pagination

//Generate JSON response }

servlet映射/ CompanyAjaxDataSource URL和get方法需要参数插件发送。为了这个目的,我们已经增加了两个实用工具类:JQueryDataTableParamModel发送插件包含的属性,和DataTablesParamUtility, 加载值

JQueryDataTableParamModel从请求。此外,在这部分代码,值将被发送到该插件的制备。实际代码填充请求的属性被省略,但你可以找到的代码示例中的代码。请注意,在这个类中的属性具有相同的名称作为插件让你可以轻松跟随代码发送的参数。

在服务器侧需要做的第一个动作,过滤公司的插件中所提供的关键字。这个代码是在下面的清单所示:

iTotalRecords = DataRepository.GetCompanies().size();

List companies = new LinkedList(); for(Company c : DataRepository.GetCompanies()){

if(c.getName().toLowerCase().contains(param.sSearch.toLowerCase()) ||

c.getAddress().toLowerCase().contains(param.sSearch.toLowerCase()) ||

c.getTown().toLowerCase().contains(param.sSearch.toLowerCase())) {

companies.add(c); // Add a company that matches search criterion } }

iTotalDisplayRecords = companies.size();

//Number of companies that matches search criterion should be returned

被放置在过滤器中的文本框中输入的关键字在param.sSearch字符串。在这个例子中,iTotalRecords 被设置为列表中的公司的总数,进行搜索由该公司的属性,

并且在列表中添加一个新的列表,包含关键字过滤公司。过滤公司的数量被放置在变量iTotalDisplayRecords。在第二部分中的代码,公司按列排列的。下面的代码显示订购使用的索引列进行排序和方向。在服务器端的代码,你需要知道列索引在公司类的属性相匹配。

finalintsortColumnIndex = param.iSortColumnIndex;

finalintsortDirection = param.sSortDirection.equals(\Collections.sort(companies, new Comparator(){ @Override

publicint compare(Company c1, Company c2) { switch(sortColumnIndex){ case 0:

return c1.getName().compareTo(c2.getName()) * sortDirection; case 1:

return c1.getAddress().compareTo(c2.getAddress()) * sortDirection; case 2:

return c1.getTown().compareTo(c2.getTown()) * sortDirection; } return 0; } });

这是一个简化的情况下,假定由一个单一的列,将被用于排序和方向的列的索引被放置在param.iSortColumIndex和param.sSortDirection属性进行排序。 最后应该实现的功能是分页。放置在当前页和长度的iDisplayStart和

iDisplayLength 属性,这些属性用于获取子应该返回到插件列表。在下面的列表显示了一个例子:

if(companies.size()

companies = companies.subList(param.iDisplayStart, companies.size()); else

companies = companies.subList(param.iDisplayStart, param.iDisplayStart + param.iDisplayLength);

当清单编制,代表的响应,应该创建一个JSON对象。创建JSON响应的代码是:

try {

JsonObjectjsonResponse = new JsonObject();

jsonResponse.addProperty(\

jsonResponse.addProperty(\

jsonResponse.addProperty(\Gsongson = new Gson(); for(Company c : companies){

JsonArray row = new JsonArray();

row.add(new JsonPrimitive(c.getName())); row.add(new JsonPrimitive(c.getAddress())); row.add(new JsonPrimitive(c.getTown())); data.add(row); }

jsonResponse.add(\

response.setContentType(\

response.getWriter().print(jsonResponse.toString()); } catch (JsonIOException e) { e.printStackTrace();

response.setContentType(\

response.getWriter().print(e.getMessage()); }

这个例子有echo,total records,total filtered records properties。此外,数据属性包含的姓名,地址,和城镇信息的矩阵。当此对象返回到该插件,过滤的信息显示在客户端上的表。

正如你看到的那样,你可以输出一个矩阵或一个对象数组返回到DataTable。如果你想输出一个对象数组,代码稍有不同:

Gsongson = new Gson(); try {

JsonObjectjsonResponse = new JsonObject();

jsonResponse.addProperty(\

jsonResponse.addProperty(\

jsonResponse.addProperty(\jsonResponse.add(\

response.setContentType(\

response.getWriter().print(jsonResponse.toString()); } catch (JsonIOException e) { e.printStackTrace();

response.setContentType(\

response.getWriter().print(e.getMessage()); }

在这个例子中使用了Java对象序列化到JSON的GSON库,但你可以使用任何其他的JSON序列库,而不是。

在这个例子中,加工完成的纯源代码,但是,在你的应用程序,你可以使用其他的方法,如SQL,存储过程,HQL等,你可以找到一个例子,从数据库中的数据表网站生成JSON响应。唯一重要的事情是,你返回JSON响应匹配的对象的当前状态在桌子上的。

结论

此示例显示如何在Java Web应用程序使用jQuery插件的数据表,你可以创建有效的,功能完整的表。使用本文中的代码示例,可以显着提高您的Web应用程序的外观和功能。我建议你试试吧 - 当你整合了几桌在你的应用程序的jQuery的数据表,你会看到的实现很简单,而且,一些练习,你会用很少的努力,能够实现很多的功能。

您可以下载一个Tomcat 6.0 Web服务器上运行的Web开发人员,附加的项目是建立在Eclipse IDE的Java EE中的代码示例。如果你有相同的配置,你可以运行和尝试这个项目,如果您有任何其他的开发环境,我建议你创建一个新的项目,将其配置,并添加类项目,你可以找到。我希望,这个例子将帮助你们创造更好的表接口。

如果你有兴趣到jQuery的DataTable中加入完整的Web 2.0的CRUD功能,我推荐另一篇文章中,数据管理(CRUD)功能添加到网络表,在这里我解释如何配置插件自动添加内嵌编辑,删除,添加新记录功能到jQuery的DataTable插件。