使用dataTables插件从servlet获取数据

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>