MiniUI DataGrid 页面分页-前端分页

作为一种前框开发脚本，Mini 目前已经到了3.0.对于Mini的使用，各类介绍也有不少，官网http://www.miniui.com/demo/ 也有不少介绍。但是具体到一些应用，总是有些差别。

具体而言，Datagrid 分页可分为两种模式，一种是将数据取回到前端，在前端做分页，另一种是 将参数传递到后台，获取了分页结果后直接传递回前端。

在使用miniui datagrid 控件之前，需要引入 两个js 文件，两个css 文件

js：

jquery-1.8.2.min.js  （jquery版本可以是最新，但是必须是 .mini）

miniui.js

css:

miniui.css  (默认情况下在miniui 插件的 default 路径下

icons.css

以asp mvc 作为后台开发语言，具体做法

1，应用visio studio 2013 开发模板，生成 mvc  基本 项目模块；

2，Controllers 建立控制器 demoController 

    public class DemoController : Controller
    {
        //
        // GET: /Demo/

        public ActionResult Index()
        {
            return View();
        }

    }

3，通过控制器生成对应的视图 index.cshtml

@{
    ViewBag.Title = "DataGrid 数据表格 前台页面分页";
}


   
   

@ViewBag.Title

   
   
   
   
   


   

       

           

顺序

           

价格

           

数量

       

   

   

4, 编写 data.txt文件，将数据存放为json 格式

{
 total: 6,
 data: [
            {price:'100',quantity:'20'},
            {price:'200',quantity:'30'},
            {price:'300',quantity:'40'},
            {price:'400',quantity:'50'},
            {price:'500',quantity:'60'},
            {price:'600',quantity:'70'}
        ]
}

5，编译运行后，出现以下效果页面

至此，分页效果完成。