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

時間 2019-11-18

標籤 datatables 作了一個分組效果順便學習 ajxs 用法简体版

原文原文鏈接

具體效果以下：

摺疊
javascript

展開
css

前臺代碼

<%@ 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);
    }

}