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

Javascript
JS幻想 读取二进制文件
javascript 层展开/关闭,带缓冲效果
仿淘宝首页分类列表效果实现代码
javascript 像素拼图实现代码
javascript+css 新闻显示tab 选项卡效果
[转]去百度面试的javascript 收获
用JavaScript显示随机图像或引用
一个类似vbscript的round函数的javascript函数
JavaScript 学习点滴记录
Js 获取HTML DOM节点元素的方法小结
在线编辑器中换行与内容自动提取
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
javascript 绘制矩形框
纯JS 绘制数学函数
javascript Excel操作知识点
jQuery 注意事项 与原因分析
JQuery 初体验(建议学习jquery)
RGB颜色值转HTML十六进制(HEX)代码的JS函数
JavaScript 使用技巧精萃(.net html
js tab 选项卡

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


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