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

Javascript
javascript 面向对象的经典实例代码
javascript prototype原型操作笔记
JavaScript 常见对象类创建代码与优缺点分析
javascript 混合的构造函数和原型方式,动态原型方式
测试JavaScript字符串处理性能的代码
JQuery 表单中textarea字数限制实现代码
jQuery Selectors(选择器)的使用(六、属性篇)
IE浏览器打印的页眉页脚设置解决方法
javascript检测(控制 )上传文件大小
jquery 双色表格实现代码
JavaScript Cookie的读取和写入函数
JavaScript 利用Cookie记录用户登录信息
JavaScript Cookie显示用户上次访问的时间和次数
JavaScript Cookie 直接浏览网站分网址
javascript OFFICE控件测试代码
javascript setTimeout和setInterval 的区别
javascript弹出窗口 window.open使用方法以及参数说明分析篇
可以用来搜索当前页面内容的js代码
动态调整textarea中字体的大小代码
为指定元素增加样式的js代码

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


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