jquery 分页控件2

时间:2022-09-22 16:25:05

上一章主要是关于分页控件的原理,代码也没有重构。在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释。为了测试这个插件是能用的,我弄了个简单的asp.net例子(vs 2010)。通过ajax根据每一页请求数据,数据是使用json格式进行传输,通过knockout.js绑定。在这里顺便推荐一下汤姆大叔的Knockout应用开发指南 ,是学习Knockout非常好的文章。

惯例:插件Demo        Asp.net Demo

效果图:

jquery 分页控件2

主要思路是通过分页控件的callback方法把  当前页  和  每页显示数量  传给pageselectCallback方法,pageselectCallback请求后台的getModel方法获取当前页的数据,然后数据通过knockout提供的方法把数据绑定到Html控件上。

一、定义请求数据方法

jquery 分页控件2
    [WebMethod]
public static string getModel(string index, string pagesize)
{
int pageIndex = Int32.Parse(index);
int pageSize = Int32.Parse(pagesize);
Models models = new Models();
IList<Model> allModels = models.getModels();//获取全部数据
if (pageIndex > 0)
{
pageIndex = pageIndex * pageSize;
}
if (pageSize > (allModels.Count - 1 - pageIndex))
{
pageSize = allModels.Count - 1 - pageIndex;
}
var pageSysmenus = allModels.Skip(pageIndex).Take(pageSize).ToList<Model>();//根据页数和每页显示数量获取数据
string thedata = JsonHelper.ObjDivertToJson(pageSysmenus);//把数据转成json格式 return thedata;
}

//获取总数
[WebMethod]
public static int getCounts()
{
Models models = new Models();
IList<Model> allModels = models.getModels();
int count = allModels.Count - 1;
return count;
}
jquery 分页控件2

二、knockout 绑定数据

jquery 分页控件2
 <table class="mytable" border="1" cellspacing="0">
<thead style="background-color: #0AA403">
<tr>
<th>
Id
</th>
<th>
Name
</th>
<th>
TrueName
</th>
<th>
Sex
</th>
<th>
Email
</th>
</tr>
</thead>
<tbody id="tChangeClor" data-bind="foreach: models">
<tr>
<td>
<span data-bind="text: Id"></span>
</td>
<td>
<span data-bind="text: Name"></span>
</td>
<td>
<span data-bind="text: TrueName"></span>
</td>
<td>
<span data-bind="text: Sex"></span>
</td>
<td>
<span data-bind="text: Email"></span>
</td>
</tr>
</tbody>
</table>
<table>
<tr>
<td id="Pagination" class="pagination">
</td>
</tr>
</table>
jquery 分页控件2

data-bind绑定的字段要与后台model的字段一致,当然knockout不单只是这个功能,还有数据验证等功能,很好用的一个插件。

三、ajax 请求数据

jquery 分页控件2
    //定义knockout的viewmodel
var viewModel = function () {
var self = this;
self.models = ko.observableArray();
}
var vm = new viewModel();
//分页控件的callback方法,通过当前页和显示页数请求数据
var pageselectCallback = function (page_index, pagesize) {
var mydata = "{'index':" + page_index + ",'pagesize':" + pagesize + "}";//post到getPage.aspx/getModel的参数
$.ajax({
type: "post",
url: "getPage.aspx/getModel",
data: mydata,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
var datas = data.d;
mappingData(datas);
},
error: function (Request) {
alert(Request.responseText);
}
});
};
var mappingData = function (data) {
var mydata = ko.mapping.fromJSON(data);
vm.models = ko.mapping.fromJS(mydata, {}, vm.models);//把json格式转换成object格式,赋值给models
$('.mytable tbody tr:even').addClass('odd');
};
$(function () {
var getCounts;
$.ajax({
type: "post",
url: "getPage.aspx/getCounts",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
var datas = data.d;
getCounts = Math.ceil(datas / 2);//总页数,向上取整
//调用分页控件插件
$("#Pagination").pagination({
pageSize: 2,
current_page: 1,
display_num: 10,
edge_num: 3,
counts_num:getCounts,
callback: pageselectCallback
});
},
error: function (Request) {
alert(Request.responseText);
}
});
ko.applyBindings(vm, document.getElementById('tChangeClor'));
});
jquery 分页控件2

关于ko.mapping.fromJSON(data)还是ko.mapping.fromJS(data)的判断,如果data是string类型( data ='{"Id":1,"Name":"WinKi"}' )就用fromJSON,如果data是object类型( data = {Id:1,Name:"WinKi"} ) 就用fromJS。如果使用$.getJSON()获取数据可以把JSON格式转换成object格式。

这个只是测试例子,实际项目中获取数据部分可以根据存储过程来获取数据,或者把全部的数据先存到缓存中。这样就不会像我例子那样每次都要先查找所有的数据。

如果您觉得还不错,点个推荐吧。

转载请注明出处!谢谢!

C# 白话系列之——白话委托

 

今天看到首页有个委托的文章,但大都写的太专业,而且没有实用的例子场景。正好昨天做了一个有关委托的功能,所以也来凑个热闹,用白话掰掰

一、委托是什么

我们都知道数据类型,简单点的如,想给一个变量赋值整数,那就要定义一个 int类型的变量

int var=5;

想给一个变量赋值字符串那就定义一个string类型的变量

string var ="test";

复杂点的就是自己定义一个类,然后就可以定义类变量

MyClass myClass= new MyClass();

现在我们有如下一个方法,怎样把这个方法可以赋值给一个变量呢?

jquery 分页控件2
        public string GetMessage(string messageType)
{
string ret = ""; switch (messageType)
{
case "error":
ret = "错误消息";
break;
case "warning":
ret = "警告消息";
break;
default:
ret = "未知消息";
break;
}
return ret;
}
jquery 分页控件2

这个就要委托来登场了。先看实现

jquery 分页控件2
        delegate string MessageDelegate(string messageType);
public void Test()
{
MessageDelegate myMessage = GetMessage; string ret = myMessage("error");
}
jquery 分页控件2
定义一个类大家都会 ,用 class 关键字来定义一个类MyClass
        class MyClass
{
}

同理,用 delegate 关键字来定义一个委托 MessageDelegate。

一定要有这个一个概念,我们用 delegate 关键字定义的委托(MessageDelegate)是一个数据类型。

int 类型的变量用来赋值整数的,string类型的变量用来赋值字符串的,而委托类型的变量是用来赋值函数的。

当然因为每个函数的参数不同,返回的数据不同,所以在定义委托的时候也就指明了这个委托类型的变量可接受的函数。

delegate string MessageDelegate(string messageType);

如上面定义的MessageDeletegate委托数据类型,用MessageDeletegate定义的变量(myMessage)只能接受 有一个string类型的参数并且有一个sting返回值的函数(GetMessage)

MessageDelegate myMessage = GetMessage;
delegate void MyDelete(int i);

上面定义的这个MyDelete委托类型对应的函数是有一个int类型的参数,并且没有返回值。

二、委托的使用

在.net中委托基本随处可见,最常用的就是Action、Func和Predicate,它们分别有很多重载,自己可以看看。

public delegate void Action();
public delegate TResult Func<out TResult>();
public delegate bool Predicate<in T>(T obj);

现在有这么一个功能:

现在有一个int类型的集合,把所有的偶数乘以2,输出到一个新集合中。

测试数据:

            List<int> myList = new List<int>();
for (int i = 0; i < 10; i++)
{
myList.Add(i);
}

普通方法实现:

jquery 分页控件2
            List<int> retList = new List<int>();
for (int i = 0; i < myList.Count; i++)
{
if (myList[i] % 2 == 0)
{
retList.Add(myList[i] * 2);
}
}
jquery 分页控件2

用委托方法实现:

jquery 分页控件2
            List<int> retList = new List<int>();

            myList.ForEach((data) =>
{
if (data % 2 == 0)
{
retList.Add(data * 2);
}
});
jquery 分页控件2

当然这个ForEach是.net提供的扩展方法,再加上lambda表达式实现。

这个还不足以说明委托的好处。

如果我们再把问题放宽点,现在有一个int类型的集合,如果里面的数字满足某个条件,则执行某个动作。

jquery 分页控件2
        public void MyOperation(List<int> myList, Func<int, bool> func, Action<int> action)
{
for (int i = 0; i < myList.Count; i++)
{
if (func(myList[i]))
{
action(myList[i]);
}
}
}
jquery 分页控件2

现在在把第一个问题实现下:

jquery 分页控件2
            MyOperation(myList, (d) =>
{
return d % 2 == 0;
}, (d) =>
{
retList.Add(d * 2);
});
jquery 分页控件2

可以近一步写成扩展方法,这个有跑题有点远了。

上面这个例子主要是说明了一点:

委托是一个函数类型的数据类型(对比int是一个整数类型的数据类型),可以把委托当做参数变量来传递。

然而因为委托变量的值是函数,这样就可以把一个函数当做参数传递到另外一个函数中。

 

jquery 分页控件2的更多相关文章

  1. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...

  2. 自己写的简单的jQuery分页控件

    因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目 ...

  3. jquery 分页控件&lpar;二&rpar;

    上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...

  4. jquery 分页控件(一)

    以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许还很多.个人觉得,适合自己用就 ...

  5. jquery 分页控件功能

      <script>        //分页         function getPageNum(num) {             $("#PageNum ul&quot ...

  6. jQuery&period;page 分页控件

    分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns=&qu ...

  7. ajax 分页控件,基于jquery

    /* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...

  8. jQuery Pagination Plugin ajax分页控件

    <html> <body> <div id="datagrid"> </div> <div id="paginati ...

  9. 基于jquery扩展漂亮的分页控件(ajax)

    分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等 ...

随机推荐

  1. vim笔记2

    用vim 快两年了 看过教程也不少,总的来说还是得自己多练习,当自己觉得有需要的时候,再添加功能.这里分享个看过的最好的教程,出自贴吧的某个朋友,写的很好 零 学会盲打 壹 配置文件先从最简开始,在 ...

  2. 小型app开发的思路

    前提: 1. 性能不是最重要: 2. 人手少: 3. 速度要快: 结论: 1. 混合式 2. 减少app的复杂程度 3. 追求性能 (博客,尽量让自己每天写一点,短一点都可以)

  3. &lpar;译&rpar;linux系统关于命令echo的15个例子

    15 Practical Examples of ‘echo’ command in Linux By Avishek Kumar Under: Linux Commands On: August 2 ...

  4. ToString&lpar;&rpar;的浅显解释(转)

    转自:http://zhidao.baidu.com/link?url=2g3NZ8tmL635L5XmWUh5i-mAlAsySunJryiq2Jl0LRsM691049dOwhoXy-8kJ6HL ...

  5. 浅谈sql优化

    问题的发现:      菜鸟D在工作的时候发现项目的sql语句很怪,例如 : select a.L_ZTBH, a.D_RQ, a.VC_BKDM, (select t.vc_name from tb ...

  6. 2017ecjtu-summer training &num;5 UVA10382

    题意 问最少可用几个圆覆盖矩形区域. 解析 将圆形转换成矩形有效区域,直径小于等于宽度的圆不考虑,从而转化成区间覆盖问题,然后贪心出最少圆. 贪心思想 每次选择出区域左界比上次选出的区域右界小的且区域 ...

  7. Centos7-两台Centos机器间复制文件

    我又两台Centos机器,一台192.168.1.1:另一台192.168.1.2 现在在将192.168.1.1上的一个文件复制到192.168.1.2.登陆到192.168.1.1然后运行命令 命 ...

  8. Python爬虫-pyspider框架的使用

      pyspider 是一个用python实现的功能强大的网络爬虫系统,能在浏览器界面上进行脚本的编写,功能的调度和爬取结果的实时查看,后端使用常用的数据库进行爬取结果的存储,还能定时设置任务与任务优 ...

  9. latex编写论文

    写给像我这样需要使用latex编写论文的小菜鸟,给出demo和注释,高级部分自己参透(默认你已经搭好环境). 1.搭论文架子 demo1 \documentclass[10pt,a4paper]{ar ...

  10. Android学习之Handler消息

    Android系统规定,一些耗时的操作不能放在UI线程中去执行,这样会报一个ANR错误.所以为了避免该问题,我们需要开启一个新的线程去执行一些耗时操作:开启新的线程,将耗时的操作在新线程里面去执行, ...