当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现

Javascript
jQuery开发者都需要知道的5个小技巧
Extjs学习笔记之六 面版
Javascript 中的类和闭包
IE6下JS动态设置图片src地址问题
Extjs学习笔记之七 布局
Extjs学习笔记之八 继承和事件基础
Extjs TriggerField在弹出窗口显示不出问题的解决方法
JavaScript中的集合及效率
利用js获取服务器时间的两个简单方法
在html页面上拖放移动标签
了解jQuery技巧来提高你的代码
JavaScript 页面坐标相关知识整理
Javascript UrlDecode函数代码
JQuery 遮罩层实现(mask)实现代码
jQuery 页面 Mask实现代码
Javascript的构造函数和constructor属性
js或css文件后面跟参数的原因说明
将CKfinder整合进CKEditor3.0的新方法
jQuery UI-Draggable 参数集合
jQuery 行级解析读取XML文件(附源码)

Javascript 中的 JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 284 ::
收藏到网摘: n/a

JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦
复制代码 代码如下:
复制代码 代码如下:

GroupText.js
var totalCount;//总页
var userdata;//数据对象
$(document).ready(function(){

if(ecid !=""){
firstSearch(ecid);
}
$("#ddlCsList").change(function(){
ecid = $.trim($("#ddlCsList").val());
firstSearch(ecid);
});
$("#btnfirst").click(function(){
firstSearch(ecid);
});
$("#btnnext").click(function(){
nextSearch(ecid);
});
$("#btnpre").click(function(){
preSearch(ecid);
});
$("#btnlast").click(function(){
lastSearch(ecid);
});
$("#gotopg").click(function(){
gotoSearch(ecid);
});

});
//绑定数据
function binddata(udata)
{
jpstr ="";//这样的目的是清空,很有用的一步
var ds = udata.value;
if ((ds!= null) && (typeof(ds) == "object"))
{
//alert( ds.Rows[0].ItemName )
var c = ds.Rows.length;
var newarr = getdataarr(udata);
for(var k = 0; k<newarr.length;k++){

var tmp = newarr[k];
jpstr +="<tr><td style=" BORDER-BOTTOM: 1px solid" style=" BORDER-BOTTOM: 1px solid"><IMG id ='"+ds.Rows[tmp].srId+"' onclick=showOrHide("+ds.Rows[tmp].srId+") style="CURSOR: hand" style="CURSOR: hand" src="Images/uuu.gif" src="Images/uuu.gif"><B>"+ds.Rows[tmp].ItemName+"</b></td></tr><tr><td>"
var jpstrA="";
for(var i=tmp; i<c; i++)
{
if(ds.Rows[tmp].ItemName == ds.Rows[i].ItemName ){
jpstrA += getTrAndTdFirstByCWidth("dg_item","10%") +
""+ds.Rows[i].ItemName + getTdNextByWidth("10%") +
""+ds.Rows[i].SendMod + getTdNextByWidth("10%") +
""+ds.Rows[i].RecvMod + getTdNextByWidth("12%") +
""+getDateByFormat(ds.Rows[i].SendDate) + getTdNextByWidth("38%") +
""+ds.Rows[i].SendMsg + getTdNextByWidth("10%") +
""+ds.Rows[i].JfValue + getTdLastByWidth("10%") +
""+getTextByStatus(ds.Rows[i].SendStatus) +
"" + getTrAndTdLast();
}
}
jpstr +=getTableHeadByWidth("100%",ds.Rows[tmp].srId) + jpstrA + getTableLast();
jpstr += "</td></tr>";
}
jpstr ="<table width=100%>"+jpstr+"</table>";

document.getElementById("divcontent").innerHTML = jpstr;
//alert(jpstr);
}
else
{
document.getElementById("divcontent").innerHTML = "";
}
}
showOrHide=function(ids){
$("#tab"+ids).toggle();
var imgName= $("#"+ids).attr("src");
var wz = imgName.indexOf('.gif');
var oldImg =imgName.substr(wz-3,3);
if(oldImg=='uuu')//选择
$("#"+ids).attr("src","Images/eee.gif");
else{
$("#"+ids).attr("src","Images/uuu.gif");
}
}
function getdataarr(udata){
var ds = udata.value;
var resultArr= new Array();
var dsstr='';
for(var i=0; i<ds.Rows.length; i++){
resultArr[i] = $.trim(ds.Rows[i].ItemName);
if(dsstr=='')
dsstr =$.trim(ds.Rows[i].ItemName);
else
dsstr+='^%^'+$.trim(ds.Rows[i].ItemName)
}
splitStr(resultArr)
var newArr = new Array();
var temparr=dsstr.split('^%^')
for(var k=0;k<resultArr.length;k++){
for(var m=0;m<temparr.length;m++){
if(resultArr[k]==temparr[m]){
newArr[k]=m;
break;
}
}
}
return newArr;
}
splitStr= function(oldarr){
var nArr=oldarr;
var isok=false;
for(var l=0;l<nArr.length;l++){
for(var j=l+1;j<nArr.length;j++){
if(nArr[l]==nArr[j]){
nArr.splice(j,1);
isok=true;
}
}
}
if(isok)
splitStr(nArr);
}
function getTextByStatus(status){
if(status==0){
return "<font color='blue'>启用</font>";
}else{
return "<font color='red'><B>禁用</B></font>";
}
}
function getImgByStatus(status){
if(status==0){
return "../Images/gz2.gif";
}else{
return "../Images/gz1.gif";
}
}
function getTxtByStatus(status){
if(status==0){
return "我要禁用";
}else{
return "我要启用";
}
}
//第一页
function firstSearch(ecid)
{
if (ecid != ""){
totalCount = Interactive.GetCmdSMSlogCount("1=1").value;
userdata = Interactive.PageingOpenCmdSMSLog(1,pageSize);//Interactive.getInteractiveSMSByEcid(ecid,pageSize,1,totalCount);
binddata(userdata);
$("#recordcount").html(totalCount.toString());//curpageindex
$("#curpageindex").html(totalCount==0?'0':1);
if (totalCount % pageSize ==0)
{
$("#pgcount").html((totalCount / pageSize).toString());
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}
}
//下一页
function nextSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
if (curpg < pgCount){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(parseInt(curpg)+1,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(parseInt(curpg)+1);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}else{
alert("当前已经是尾页了!");
}
}
}
//上一页
function preSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
if (curpg > 1 ){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(parseInt(curpg)-1,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(parseInt(curpg)-1);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}else{
alert("当前已经是首页了!");
}
}
}
//尾页
function lastSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
if (curpg < pgCount ){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(pgCount,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(pgCount);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}
}
}
//跳转指定页
function gotoSearch(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
var pgCount = $("#pgcount").html();//得到总的页数
var pggoto =$("#gototxt").val();
var reg = /[^\d]/g;
if (($.trim(pggoto) != "") && !(reg.test(pggoto))){
if ((parseInt(curpg) != parseInt(pggoto)) && (pggoto <= pgCount)){
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(pggoto,pageSize);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(pggoto);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}
}
}else{
alert("请输入正确的数字!");
}
}
}
//刷新
function Refresh(ecid){
if (ecid != ""){
var curpg =$("#curpageindex").html();//得到当前页
totalCount = Interactive.GetCmdSMSlogCount('1=1').value;
userdata = Interactive.PageingOpenCmdSMSLog(curpg);
binddata(userdata);
$("#recordcount").html(totalCount);//curpageindex
$("#curpageindex").html(curpg);
if (totalCount % pageSize ==0)
{
$("#pgcount").html(totalCount / pageSize);
}else{
$("#pgcount").html(parseInt(totalCount / pageSize)+1);
}

}
}

复制代码 代码如下:

GroupText.aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
Ajax.Utility.RegisterTypeForAjax(typeof(DataAccess.Interactive));
}

复制代码 代码如下:

Interactive.cs:
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataTable PageingOpenCmdSMSLog(int pgindex,int pageSize)
{
int pageIndex=pgindex;
DataTable dt = new DataTable ();
JSONHelper json = new JSONHelper();
int count = GetCmdSMSlogCount("1=1");
dt = GetDataByPager2000("SendAndRecvData S left join InteractiveSMS I on (S.ItemId=I.Id AND S.ECID=I.ECID)","srId","1=1",pageSize,pageIndex,"srId",1,
"S.srId,I.ItemName,S.SendMod,S.RecvMod,S.SendDate,S.SendMsg,S.JfValue,S.SendStatus",count);
return dt;
}
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public int GetCmdSMSlogCount(string where)
{
try
{
int count = ReturnSQL("select count(*) from SendAndRecvData S left join InteractCommand I on(S.ItemId=I.Id AND S.ECID=I.ECID) where "+where);
return count;
}
catch (Exception)
{
throw;
}
}
/// <summary>
/// 分页获取数据列表 适用于SQL2000
/// </summary>
/// <param name="tablename">表名</param>
/// <param name="key">主键</param>
/// <param name="where">查询条件</param>
/// <param name="pagesize">每页记录数</param>
/// <param name="pageindex">页索引</param>
/// <param name="orderfield">排序字段</param>
/// <param name="ordertype">排序方式 1=ASC 0=DESC</param>
/// <param name="fieldlist">查找的字段</param>
/// <param name="recordcount">总记录数</param>
/// <returns></returns>
public static DataTable GetDataByPager2000(string tablename, string key, string where, int pagesize, int pageindex, string orderfield, int ordertype, string fieldlist, int recordcount)
{
string cmd = "ProcCustomPage";
SqlParameter[] para = new SqlParameter[9];
para[0] = new SqlParameter("@Table_Name", tablename);
para[1] = new SqlParameter("@Sign_Record", key);
para[2] = new SqlParameter("@Filter_Condition", where);
para[3] = new SqlParameter("@Page_Size", pagesize);
para[4] = new SqlParameter("@Page_Index", pageindex);
para[5] = new SqlParameter("@TaxisField", orderfield);
para[6] = new SqlParameter("@Taxis_Sign", ordertype);
para[7] = new SqlParameter("@Find_RecordList", fieldlist);
para[8] = new SqlParameter("@Record_Count", recordcount);
return ExecuteDataSet(CommandType.StoredProcedure, cmd, para).Tables[0];
}
public static DataSet ExecuteDataSet(CommandType cmdType, string cmdText, params SqlParameter[] para)
{
try
{
using (SqlConnection con = new SqlConnection(CONN_STRING))
{
SqlDataAdapter adapter = new SqlDataAdapter();
using (SqlCommand cmd = new SqlCommand())
{
DataSet ds = new DataSet();
PrepareCommand(con, cmd, cmdType, cmdText, para);
adapter.SelectCommand = cmd;
adapter.Fill(ds);
return ds;
}
}
}
catch(Exception ex)
{
string d=ex.ToString();
return null;
}
}
/// <summary>
/// 建立SqlCommand
/// </summary>
/// <param name="con">SqlConnection 对象</param>
/// <param name="cmd">要建立的Command</param>
/// <param name="cmdType">CommandType</param>
/// <param name="cmdText">执行的SQL语句</param>
/// <param name="cmdParms">参数</param>
private static void PrepareCommand(SqlConnection con, SqlCommand cmd, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
{
if (con.State != ConnectionState.Open)
con.Open();
cmd.Connection = con;
cmd.CommandType = cmdType;
cmd.CommandText = cmdText;
if (cmdParms != null)
foreach (SqlParameter para in cmdParms)
cmd.Parameters.Add(para);
}