jquery - easyui - 分页

  1. datagrid 【表格分页】
  2. var orderDataGrid = $("#orderDataGrid").datagrid({
    width : "auto",
    height : "auto",
    idField : "memberid",                                                                                   //【主键】
    url : "${pageContext.request.contextPath}/orderweb/getOrderList",               //【获得数据接口】
    columns : [[                                                                                               //【列名】
    {field : "orderid", title : "订单编号", width:fixWidth(0.13)},
    {field : "uphonenumber", title : "下单人手机号码", width:fixWidth(0.1)},
    {field : "prodname", title : "商品名称", width:fixWidth(0.1)},
    {field : "price", title : "商品市场价", width:fixWidth(0.08), formatter:priceFormatter},
    {field : "pointsvalue", title : "商品保险币价值", width:fixWidth(0.1), formatter:pointsValueFormatter},
    {field : "protype", title : "商品类型", width:fixWidth(0.06), formatter:protypeFormatter},
    {field : "receiver", title : "收件人", width:fixWidth(0.1)},
    {field : "orderstatus", title : "订单状态", width:fixWidth(0.1), formatter:orderStatusFormatter},
    {field : "udphonenumber", title : "收件人手机号码", width:fixWidth(0.1)},
    {field : "ordertime", title : "下单时间", width:fixWidth(0.15), formatter : updateTimeFormatter},
    {
    field : "operation", title : "操作", width:fixWidth(0.15), formatter : operationFormatter
    }
    ]],
    fitColumns : true,
    rownumbers : true,
    pagination : true,
    pageSize : 10,
    pageList : [10, 20],
    striped : true,
    onBeforeLoad : function(param) {
    param.pageindex = param.page;
    param.pagesize = param.rows;

    var orderid = $("input[name=‘orderid‘]").val();
    if(orderid != "" && typeof(orderid) != "undefined" && orderid != null) {
    param.orderid = orderid;
    }

    var phonenumber = $("input[name=‘phonenumber‘]").val();
    if(phonenumber != "" && typeof(phonenumber) != "undefined" && phonenumber != null) {
    param.phonenumber = phonenumber;
    }

    var prodname = $("input[name=‘prodname‘]").val(); //【获得所有name = prodname的input标签】
    if(prodname != "" && typeof(prodname) != "undefined" && prodname != null) {
    param.prodname = prodname;
    }

    var orderstatus = $("select[name=‘ordetstatus‘] option:selected").val();
    if(orderstatus) {
    param.orderstatus = orderstatus;
    }

    delete param.page;
    delete param.rows;

    return true;
    },
    onClickRow: onClickRowFunction,
    onLoadError : onLoadErrorFunction

    });

时间: 2024-10-05 06:38:22

jquery - easyui - 分页的相关文章

MVC 使用Jquery EasyUI分页成功

先上图吧 你得先下载一个EasyUi框架,地址:http://www.jeasyui.net/download/ 在你的项目中需要引用,前台代码如下: DataGrid.cshtml @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>DDL</title> <link href="../../Scripts/JqueryEasyUi/themes/default/ea

jquery easy-ui 分页插件的运用(给td添加事件,获取汇总内容)

<#include '/admin/express-header.html' > <div class="main" style=" background:#fff; padding: 15px 0px 8px 10px; margin: 0px;"><div class="ex-boxOne"> <label for="start_date">订阅日期:</label&g

easyui分页的使用方法

使用: $("#tt").datagrid("getPager").pagination(option); 例子: $("#tb").datagrid("getPager").pagination({ total: 100, pageSize: 10, pageList: [10,20,30], onSelectPage: function(pageNumber, pageSize) { console.log(pageNum

第二百零九节,jQuery EasyUI,Pagination(分页)组件

jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法,这个组件依赖于 LinkButton(按钮)组件.

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public string ItemId { get; set; } public string ProductId { get; set; } public decimal ListPrice { get; set; } public decimal UnitCost { get; set; } public strin

套用JQuery EasyUI列表显示数据、分页、查询

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3