使用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>