zoukankan      html  css  js  c++  java
  • js实现EasyUI-datagrid前台分页

    1. //实现假分页  
    2. function myLoader(param, success, error) {  
    3.     var that = $(this);  
    4.     var opts = that.datagrid("options");  
    5.     if (!opts.url) {  
    6.         return false;  
    7.     }  
    8.     var cache = that.data().datagrid.cache;  
    9.     if (!cache) {  
    10.         $.ajax({  
    11.             type: opts.method,  
    12.             url: opts.url,  
    13.             data: param,  
    14.             dataType: "json",  
    15.             success: function (data) {  
    16.                 that.data().datagrid['cache'] = data;  
    17.                 success(bulidData(data));  
    18.             },  
    19.             error: function () {  
    20.                 error.apply(this, arguments);  
    21.             }  
    22.         });  
    23.     } else {  
    24.         success(bulidData(cache));  
    25.     }  
    26.   
    27.     function bulidData(data) {  
    28.         var temp = $.extend({}, data);  
    29.         var tempRows = [];  
    30.         var start = (param.page - 1) * parseInt(param.rows);  
    31.         var end = start + parseInt(param.rows);  
    32.         var rows = data.rows;  
    33.         for (var i = start; i < end; i++) {  
    34.             if (rows[i]) {  
    35.                 tempRows.push(rows[i]);  
    36.             } else {  
    37.                 break;  
    38.             }  
    39.         }  
    40.         temp.rows = tempRows;  
    41.         return temp;  
    42.     }  
    43. }  

    加载datagrid时的调用

     
    1. $('#dg').datagrid({  
    2.                    loadMsg: '正在努力为您加载数据',  
    3.                    url: 'Handler.ashx?action=GetData' + "&Id=" +Id,  
    4.                    fitColumn: false,  
    5.                    pageNumber: 1,  
    6.                    pagination: true,//分页控件   
    7.                    rownumbers: true,//显示行号  
    8.                    pageSize: 3,  
    9.                    pageList: [3, 15, 50, 100],  
    10.                    loader: <span style="color:#ff0000;">myLoader</span>, //前端分页加载函数  
    11.                    onLoadSuccess: function (data) {  
    12.                        $("#dg").data().datagrid.cache = null;//清除datagrid 缓存,保证前台假分页;  
    13.                       //$('#dg').datagrid('reload');显示更新后的数据  
    14.                    }  
    15.                });  
  • 相关阅读:
    利用Python爬取疫情数据并使用可视化工具展示
    接口与多态
    defer 延迟调用
    Spring缓存注解
    SpringAOP
    Mybatis动态SQL语句
    SpringMVC
    Spring Boot入门
    vue中使用JS实现倒计时功能
    springboot使用aop注解在controller层打印请求和响应报文
  • 原文地址:https://www.cnblogs.com/huangf714/p/5871393.html
Copyright © 2011-2022 走看看