1.資料庫關聯關係：

SC(s_id , c_id , score) 成績表(學生id,課程id,分數)
Student(sid,sname,sage,ssex)學生表(學生id,姓名,年齡,性別)
course(cid,cname,t_id)課程表(課程id,課程名稱,代課老師)
teacher(tid,tname)老師表(老師id,老師姓名)

2.前臺程式碼

<!-- 資料網格 -->
<table id="tt2">
</table>

$("#tt2").datagrid({
            title:'取巢狀物件',
            width:1100,
            heigh:500,
            rownumbers:true,
            fitColumns:true,
            singleSelect:true,
            pagination:true,
            url:'/scInfo',
            columns:[[
                {title:'sc s_id',field:'s_id',width:80},
                {title:'sc c_id',field:'c_id',width:80},
                {title:'sc score',field:'score',width:100,align:'right'},
                {title:'stu sid',field:'sid',width:80,
                    formatter:function(value,row,index){
                        return row.student.sid;
                    }        
                },
                {title:'stu sname',field:'sname',width:80,
                    formatter:function(value,row,index){
                        return row.student.sname;
                    }    
                },
                {title:'stu sage',field:'sage',width:80,
                    formatter:function(value,row,index){
                        return row.student.sage;
                    }    
                },
                {title:'stu ssex',field:'ssex',width:80,
                    formatter:function(value,row,index){
                        return row.student.ssex;
                    }        
                },
                {title:'course cid',field:'cid',width:80,
                    formatter:function(value,row,index){
                        return row.course.cid;
                    }
                },
                {title:'course cname',field:'cname',width:80,
                    formatter:function(value,row,index){
                        return row.course.cname;
                    }
                },
                {title:'course t_id',field:'t_id',width:80,
                    formatter:function(value,row,index){
                        return row.course.t_id;
                    }
                },
                {title:'teacher tid',field:'tid',width:80,
                    formatter:function(value,row,index){
                        return row.course.teacher.tid;
                    }
                },
                {title:'teacher tname',field:'tname',width:80,
                    formatter:function(value,row,index){
                        return row.course.teacher.tname;
                    }
                }
            ]]
        });
 

3.分頁展示：

開啟分頁 pagination:true
請求的時候帶page和rows ，返回的時候我們返回total總數，和資料集合list就ok了， 就這麼簡單。

@RequestMapping("/scInfo")
    public String info(HttpServletRequest request) {
        int page , rows , offset;//頁碼 ,每頁展示條數,偏移量
        String input_page = request.getParameter("page");
        page = (input_page==null
 
)?1:Integer.parseInt(input_page);
        String input_rows = request.getParameter("rows");        
        rows = (input_rows==null)?10:Integer.parseInt(input_rows);
        offset = (page-1)*rows;
                
        return scService.info(offset, rows);
    }

@Service
public class ScServiceImpl implements
 
 ScService{

    @Autowired
    private ScMapper scMapper;
    
    @Override
    public String info(int offset , int rows) {
        HashMap<String, Object> map = new HashMap<>();
        int total = scMapper.infoCount();//總共的記錄數
        List<Sc> list = scMapper.selectInfo(offset, rows);
        map.put("total", total);
        map.put("rows",list);
        return JSONObject.toJSONString(map);
    }

}

xml程式碼

<resultMap type="com.example.demo.entity.Sc" id="baseResult">
        <result column="s_id" property="s_id" jdbcType="DECIMAL"/>
        <result column="c_id" property="c_id" jdbcType="DECIMAL"/>
        <result column="score" property="score" jdbcType="DECIMAL"/>
        <association property="student" columnPrefix="STUDENT_" resultMap="com.example.demo.mapper.StudentMapper.baseResult"></association>
        <association property="course" columnPrefix="COURSE_" resultMap="com.example.demo.mapper.CourseMapper.baseResult"></association>
    </resultMap>

<select id="infoCount" resultType="INTEGER">
     select 
        count(*)
    from sc , student , course , teacher 
    where sc.s_id = student.sid and sc.c_id = course.cid 
    and course.t_id = teacher.tid
  </select>
    
    <select id="selectInfo" resultMap="baseResult">
        select 
            sc.s_id,
            sc.c_id,
            sc.score, 
            student.sname STUDENT_sname,
            student.sage STUDENT_sage,
            student.ssex STUDENT_ssex,
            course.cname COURSE_cname,
            teacher.tid COURSE_TEACHER_tid,
            teacher.tname COURSE_TEACHER_tname 
        from sc , student , course , teacher 
        where sc.s_id = student.sid and sc.c_id = course.cid 
        and course.t_id = teacher.tid limit #{offset},#{rows}
    </select>