1. 程式人生 > >用DataTables做了一個行分組的效果,順便學習了ajxs的用法

用DataTables做了一個行分組的效果,順便學習了ajxs的用法

pro 1-1 arch eval func -m script web rem

具體效果如下:

折疊
????技術分享圖片

展開
????技術分享圖片

前臺代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
> <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="css/tableDetail.css"> <title>DataTables Test</title> </head> <body> <table id="myTable" class="table"> <thead> <tr> <!-- <th>年級</th> -->
<!-- <th>班級</th> --> <!-- <th>姓名</th> --> <!-- <th>性別</th> --> <th width="25%">組織</th> <th width="25%">男、女個數</th> <th width="25%">男占比</th> <th width
="25%">女占比</th> </tr> </thead> <tbody> </tbody> </table> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.dataTables.js"></script> <script> var oTable; $(document).ready(function() { oTable = $(‘#myTable‘).dataTable({//這裏的dataTable不能換成DataTable,原因不清楚,但就是個坑,大坑 info : false, paging: false, processing: false, ordering: false, searching: false, columns:[ {data: ‘grade‘}, {data: function ( row, type, set ) { return ‘男生有‘ + row[‘man‘] + ‘人,女生有‘ + row[‘woman‘] + ‘人。‘ ; }}, {data: ‘man‘}, {data: ‘woman‘} ], serverSide: true, ajax: { url: ‘FindServlet‘, dataSrc: ‘‘, type: ‘POST‘, dataType : ‘json‘, scriptCharset: ‘utf-8‘ }, columnDefs: [ { targets: 0, "render": function ( data, type, row ) { return "<span class=‘row-details row-details-close‘ data_id=‘" + row[‘grade‘] + "‘></span>" + data; } } ] }); $(‘.table‘).on(‘click‘, ‘ tbody td .row-details‘, function () { //alert(‘a‘); var nTr = $(this).parents(‘tr‘)[0]; if (oTable.fnIsOpen(nTr))//判斷是否已打開 { /* This row is already open - close it */ $(this).addClass("row-details-close").removeClass("row-details-open"); oTable.fnClose( nTr ); }else{ /* Open this row */ $(this).addClass("row-details-open").removeClass("row-details-close"); // 調用方法顯示詳細信息 data_id為自定義屬性 存放配置ID fnFormatDetails(nTr,$(this).attr("data_id")); } }); }); function fnFormatDetails(nTr,pdataId){ $.ajax({ type:‘post‘, url:"FindServlet?type=detail", dataSrc: ‘‘, data:{"pdataId":pdataId}, dataType:"text", async:true, success:function (data,textStatus){ if(textStatus=="success"){ //轉換格式 組合顯示內容 var res = eval("("+data+")"); var sOut = ‘<table style="width:100%;">‘; for(var i=0;i<res.length;i++){ sOut+=‘<tr>‘; sOut+=‘</td><td width="25%">&nbsp&nbsp&nbsp&nbsp&nbsp‘+res[i].class+‘</td>‘; sOut+=‘<td width="25%">男生有‘+res[i].man + ‘人, 女生有‘ + res[i].woman +‘人</td>‘; sOut+=‘<td width="25%">‘+res[i].man+‘</td>‘; sOut+=‘<td width="25%">‘+res[i].woman+‘</td>‘; sOut+=‘</tr>‘; } sOut+=‘</table>‘; oTable.fnOpen( nTr,sOut, ‘details‘ ); } }, error: function(){//請求出錯處理 oTable.fnOpen( nTr,‘加載數據超時~‘, ‘details‘ ); } }); } </script> </body> </html>

後臺servlet代碼

package com.zhang.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.zhang.daoImpl.FindStudent;
import com.zhang.domain.Student;

/**
 * Servlet implementation class FindServlet
 */
@WebServlet("/FindServlet")
public class FindServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public FindServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        FindStudent fs = new FindStudent();

        request.setCharacterEncoding("utf-8");
        String grade = request.getParameter("pdataId");
        List<Student> list = new ArrayList<Student>();
        JSONArray jarray = new JSONArray();
        if (grade != null) {
            list = fs.findByGrade(grade);
            for (Student s : list) {
                JSONObject jo = new JSONObject();
                try {
                jo.put("class", s.getClas());
                jo.put("man", String.valueOf(s.getMan()));
                jo.put("woman", String.valueOf(s.getWoman()));
                jarray.put(jo);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        } else {
            list = fs.findAll();
        
            for (Student s : list) {
                JSONObject jo = new JSONObject();
                try {
                jo.put("grade", s.getGrade());
                jo.put("man", String.valueOf(s.getMan()));
                jo.put("woman", String.valueOf(s.getWoman()));
                jarray.put(jo);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }
        
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(jarray.toString());
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

項目源碼在github上,具體網址如下

https://github.com/Spancymath/datables-.git

用DataTables做了一個行分組的效果,順便學習了ajxs的用法