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

Javascript
关于javascript document.createDocumentFragment()
javascript 有趣而诡异的数组
javascript 兼容鼠标滚轮事件
javascript mouseover、mouseout停止事件冒泡的解决方案
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
javascript 表格排序和表头浮动效果(扩展SortTable)
Cookie 注入是怎样产生的
javascript RadioButtonList获取选中值
javascript fullscreen全屏实现代码
常用简易JavaScript函数
用js实现的检测浏览器和系统的函数
File文件控件,选中文件(图片,flash,视频)即立即预览显示
js 获取键盘值用法(兼容IE及Firefox)
javascript 鼠标滚轮事件
javascript 原型模式实现OOP的再研究
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
javascript html 静态页面传参数
Firefox window.close()的使用注意事项
javascript removeChild 使用注意事项
js cookies 常见网页木马挂马代码 24小时只加载一次

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 470 ::
收藏到网摘: 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);
}