您的位置:首页 > 其它

使用dataTables插件从servlet获取数据

2017-06-21 18:17 281 查看
1、首先下载jquery.dataTables.js,http://datatables.club/

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dataTables