EasyUI DataGrid表格分页效果实现—笔记

最新推荐文章于 2024-03-28 19:03:36 发布

beyond_zl

最新推荐文章于 2024-03-28 19:03:36 发布

阅读量694

点赞数

分类专栏： JavaEE 文章标签：分页 easyui datagrid

本文链接：https://blog.csdn.net/qq_15370821/article/details/53559775

版权

JavaEE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

将DataGrid属性设置和分页配置一起放入Ajax请求成功的回调函数中，方便将返回的数据传入DataGrid分页配置中。
网页上点击下一页或上一页或选择页面显示行数后都会发送AJax请求，重新将相应数据填入表格中。

<script type="text/javascript">
      var projectId = '${projectId}';



   // console.debug(projectId);
    var ctx = '${ctx}';
    $("#search_img").attr("src",ctx+"/static/easyui/css/images/u222.png");
    var dataCache="";
    var dataCachePi="";
    var queVertifyCentChart = "";


    //自动加载代码质量度量报告表格并填充数据
    //表格分页实现
     $(function(){

              $.ajax({
                 type : "POST",
                 url : ctx + "/home/vertifyView/codeQualitydataView",
                 data : {
                     "projectId" : projectId
                 },
                 success : function(data){ 
                    $("#CodeQualityReportDg").datagrid({
                        fitColumns : true,
                        rownumbers : true,
                        striped  : true,
                        singleSelect : true,
                        pagination : true,
                        method : "POST",
                        loadMsg : 'Processing, please wait …',
                        data : data.slice(0,10),
                        columns : [[ 
                                     {field :'project_name',      title  :'文件名',width : 200,align : 'center'}, 
                                     {field :'source_id',      title  :'source_id',width : 60,align : 'center'}, 
                                     {field :'code_line',      title  :'总行数',width : 100,align : 'center'},
                                     {field :'sentence_count',     title  :'语句数目',width :100,align : 'center'},
                                     {field :'branch_percentage',      title  :'分支占比',width:100,align : 'center',formatter:function(v,r){
                                         return v+"%";
                                     }}, 
                                     {field :'anno_percentage',title  :'注释占比',width:100, align : 'center',formatter:function(v,r){
                                         return v+"%";
                                     }},
                                     {field :'function_count',title : '函数个数',width:100, align : 'center'},
                                     {field :'avg_sentence_count',      title  :'平均每个函数包含的语句数目',width : 200,align : 'center'}, 
                                     {field :'max_complexity',      title  :'最大复杂度',width : 100,align : 'center'},
                                     {field :'max_depth',     title  :'最大深度',width :100,align : 'center'},
                                     {field :'avg_complexity',      title  :'平均复杂度',width:100,align : 'center'}, 
                                     {field :'avg_depth',title  :'平均深度',width:100, align : 'center',}
                            ]]
                        });

                      var pager = $("#CodeQualityReportDg").datagrid("getPager");
                      pager.pagination({ 
                          total : data.length, 
                          onSelectPage : function (pageNo, pageSize) { 
                              var start = (pageNo - 1) * pageSize; 
                              var end = start + pageSize; 
                              $("#CodeQualityReportDg").datagrid("loadData", data.slice(start, end)); 
                              pager.pagination('refresh', { 
                                    total : data.length, 
                                    pageNumber : pageNo 
                              }); 
                    } 
                  });
                 },
                 error: function(){}
             });    
      });
</script>