使用dataTables插件从servlet获取数据
2017-06-21 18:17
281 查看
1、首先下载jquery.dataTables.js,http://datatables.club/
2、引用js
3、html代码
4、js代码
5、后台代码,模拟从数据库获取数据
6、web.xml配置
2、引用js
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dataTables.js"></script>
3、html代码
<table id="test" class="display" cellspacing="0" width="50%"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </thead> </table>
4、js代码
$(function(){ var table = $('#test').DataTable( { ajax: 'tableServlet', columns:[ {"data":"name"}, {"data":"age"}, {"data":"sex"} ] }); //也可以,跟jquery的ajax一样调用 // var table = $('#test').DataTable( { // ajax: { // url:"tableServlet", // type:"post", // }, // columns:[ // {"data":"name"}, // {"data":"age"}, // {"data":"sex"} // ] // }); });
5、后台代码,模拟从数据库获取数据
package testServlet; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.google.gson.GsonBuilder; public class TableServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("进来了。。。。。。。。。。"); Map<String, Object> map1 = new HashMap<String, Object>(); Map<String, Object> map2 = new HashMap<String, Object>(); Map<String, Object> map3 = new HashMap<String, Object>(); map1.put("name", "aaa"); map1.put("age", 20); map1.put("sex", "男"); map2.put("name", "bbb"); map2.put("age", 25); map2.put("sex", "男"); map3.put("name", "ccc"); map3.put("age", 27); map3.put("sex", "男"); List<Map<String, Object>> list = new ArrayList<>(); list.add(map1); list.add(map2); list.add(map3); Map<String, Object> map4 = new HashMap<String, Object>(); map4.put("data", list); resp.setCharacterEncoding("UTF-8"); Gson gson = new GsonBuilder().create(); String result = gson.toJson(map4); System.out.println(result); resp.getWriter().write(result); resp.getWriter().flush(); } }
6、web.xml配置
<servlet> <servlet-name>tableServlet</servlet-name> <servlet-class>testServlet.TableServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>tableServlet</servlet-name> <url-pattern>/datatables/tableServlet</url-pattern> </servlet-mapping>
相关文章推荐
- 关于Java Web使用的DataTables插件获取所有数据以及表格刷新
- OpenLayers学习笔记8——使用servlet从mysql获取数据并标注
- Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析
- jquery自动补全插件autocomplete的使用方法之autocomplete ajax获取数据展示
- 带有分页排序功能的表格插件的使用(通过ajax获取后台数据)
- struts2_day02_06-获取表单数据(使用ServletActionContext获取和接口注入)
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- ajax获取json数据使用jquery分页插件显示
- 通过ajax获取数据的分页插件的使用、jquery.paginate.js 还有搜索
- 解决在 使用 AjaxFileUploder 插件时,不能获取返回的 json 结果数据
- 使用jQGrid插件,远程获取json数据绑定
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
- 使用AJAX异步获取数据
- 使用VB实现Excel自动获取外部数据
- 使用HttpWebRequest访问网页及获取数据
- Hibernate获取数据方式与缓存使用
- SERVLET与JSP Jsp中使用xmlhttp进行数据交互
- Biztalk中使用SQL适配器获取数据并用web服务发布的例子
- Biztalk中使用SQL适配器获取数据并用web服务发布的例子
- HYORM使用篇之获取数据