使用纯HTML页与js、ajax、Linq实现分页与组合查询的配合使用
1 <body> 2 <div id="top"><input type="button" id="btn1" class="btn" value="刷新" /></div> 3 <div style="position:relative;text-align:center;height:50px"> 4 商品名：<input type="text" id="tx1" /> 5 价格<input type="text" id="tx2" />～<input type="text" id="tx3" /> 6 <input type="button" id="btt" value="查询" style="cursor:pointer"/> 7 </div> 8 <div style="position:relative;"> 9 <table id="tb1" style="background-color: #00ffff ; text-align: center; 100%;"> 10 <thead> 11 <tr style="color: #ff6a00;"> 12 <td>商品名</td> 13 <td>图片</td> 14 <td>数量</td> 15 <td>尺寸</td> 16 <td>CPU</td> 17 <td>价格</td> 18 <td>操作</td> 19 </tr> 20 </thead> 21 <tbody> 22 <!--<tr style="background-color: white;"> 23 <td></td> 24 </tr>--> 25 </tbody> 26 </table> 27 </div> 28 <div id="ye"> 29 当前第 <span id="nowye">1</span> 页  共 <span id="allye"></span> 页 30 <input id="btn_first" type="button" value="首页" /> <input id="btn_prev" type="button" value="上一页" /> <input type="button" id="btn_next" value="下一页" /> <input type="button" id="btn_end" value="末页" /> 31 <select id="dr1"></select> 32 </div> 33 </body>
js与ajax代码：
1 <script> 2 var pcount = 4; 3 var Mcount = 0; 4 var aname = "0"; 5 var aprice = "0"; 6 var bprice ="0"; 7 var NowNumber = parseInt($("#nowye").text()); 8 data(); 9 max(); 10 //点击刷新按钮 11 $("#btn1").click(function () { 12 data(); 13 }) 14 //上一页 15 $("#btn_prev").click(function () { 16 17 NowNumber = parseInt($("#nowye").text()) - 1; 18 if (NowNumber<1) 19 { 20 return; 21 } 22 data(); 23 } 24 ); 25 //首页 26 $("#btn_first").click(function () { 27 28 NowNumber = 1; 29 data(); 30 } 31 32 ); 33 //末页 34 $("#btn_end").click(function () { 35 36 NowNumber = parseInt($("#allye").text()); 37 data(); 38 } 39 40 ); 41 //快捷跳转 42 $("#dr1").change(function () { 43 NowNumber = parseInt($("#dr1").val()); 44 data(); 45 } 46 47 ); 48 //下一页 49 $("#btn_next").click(function () { 50 51 NowNumber = parseInt($("#nowye").text()) + 1; 52 if (NowNumber > parseInt($("#allye").text())) { 53 return; 54 } 55 data(); 56 } 57 ); 58 //点击查询按钮 59 $("#btt").click(function () { 60 aname = $("#tx1").val(); 61 aprice = $("#tx2").val(); 62 bprice = $("#tx3").val(); 63 NowNumber = 1; 64 max(); 65 data(); 66 }) 67 //获取总页数与绑定快捷页数 68 function max() { 69 $.ajax({ 70 url: "ajax/allcom.ashx", 71 data: { "ak": aname, "bk": aprice, "ck": bprice }, 72 type: "post", 73 dataType: "json", 74 success: function (data) { 75 var maxcount = data.cn; 76 var te = maxcount / (pcount * 1.0); 77 Mcount = Math.ceil(te); 78 $("#allye").html(Mcount); 79 $("#dr1").empty(); 80 for(var i=1;i<=Mcount;i++) 81 { 82 var str = "<option value="" + i + "">" + i + "</option>"; 83 $("#dr1").append(str); 84 } 85 86 }, 87 error: function () { 88 alert('服务器连接失败！！！'); 89 }, 90 beforeSend: function () { 91 92 } 93 94 }); 95 } 96 //数据展现 97 function data() { 98 $.ajax({ 99 url: "ajax/com.ashx", 100 data: {"un":NowNumber,"yn":pcount,"ak":aname,"bk":aprice,"ck":bprice}, 101 type: "post", 102 dataType: "json", 103 success: function (data) { 104 $("#tb1 tbody").empty();//清空tbody 105 for (i in data) { 106 var str = "<tr style="background-color: #a9ff98; " class="trs">"; 107 str += "<td>" + data[i].pname + "</td>"; 108 str += "<td> <img src=""+ data[i].pic +"" style="60px;height:60px"/> </td>"; 109 str += "<td>" + data[i].pcode + "</td>"; 110 str += "<td>" + data[i].size + "</td>"; 111 str += "<td>" + data[i].cpu + "</td>"; 112 str += "<td>" + data[i].price + "</td>"; 113 str += "<td> <input type="button" class="btn2" value="删除" /> </td>"; 114 str += "</tr>"; 115 $("#tb1 tbody").append(str); 116 $("#nowye").html(NowNumber); 117 $("#dr1").val(NowNumber); 118 } 119 }, 120 error: function () { 121 alert('服务器连接失败！！！'); 122 }, 123 beforeSend: function () { 124 125 } 126 127 }); 128 129 }; 130 </script>
1 public void ProcessRequest(HttpContext context) 2 { 3 int pcount = Convert.ToInt32(context.Request["yn"]); 4 int pagenumber = Convert.ToInt32(context.Request["un"]); 5 string sname = context.Request["ak"]; 6 int sprice1; 7 int sprice2; 8 try 9 { 10 sprice1 = Convert.ToInt32(context.Request["bk"]); 11 } 12 catch 13 { 14 sprice1 = 0; 15 } 16 try 17 { 18 sprice2 = Convert.ToInt32(context.Request["ck"]); 19 } 20 catch 21 { 22 sprice2 = 0; 23 } 24 int count = 0; 25 string end = "["; 26 using (WebDataContext con = new WebDataContext()) 27 { 28 29 var clist = con.Computer.AsEnumerable(); 30 if (sname!="0") 31 { 32 var namelist = con.Computer.Where(r => r.Name.Contains(sname)); 33 34 clist = clist.Intersect(namelist); 35 } 36 if (sprice1 != 0) 37 { 38 var plist = con.Computer.Where(r => Convert.ToInt32(r.price) >= sprice1); 39 clist = clist.Intersect(plist); 40 } 41 if (sprice2 != 0) 42 { 43 var plist2 = con.Computer.Where(r => Convert.ToInt32(r.price) <= sprice2); 44 clist = clist.Intersect(plist2); 45 } 46 47 clist = clist.Skip(pcount * (pagenumber - 1)).Take(pcount); 48 foreach (Computer c in clist) 49 { 50 //前面有数据 51 if (count > 0) 52 { 53 end += ","; 54 } 55 end += "{"pname":"" + c.Name + "","size": "" + c.size + "","cpu": "" + c.Cpu + "","price": "" + c.price + "","pic": "" + c.pic + "","pcode":"" + c.pcode + "","pid":"" + c.ids + "" }"; 56 count++; 57 } 58 } 59 end += "]"; 60 context.Response.Write(end); 61 context.Response.End(); 62 63 }
1 public void ProcessRequest (HttpContext context) { 2 string sname = context.Request["ak"]; 3 int sprice1; 4 int sprice2; 5 try 6 { 7 sprice1 = Convert.ToInt32(context.Request["bk"]); 8 } 9 catch 10 { 11 sprice1 = 0; 12 } 13 try 14 { 15 sprice2 = Convert.ToInt32(context.Request["ck"]); 16 } 17 catch 18 { 19 sprice2 = 0; 20 } 21 string end=""; 22 using (WebDataContext con = new WebDataContext()) 23 { 24 25 var clist = con.Computer.AsEnumerable(); 26 if (sname!="0") 27 { 28 var namelist = con.Computer.Where(r => r.Name.Contains(sname)); 29 30 clist = clist.Intersect(namelist); 31 } 32 if (sprice1 != 0) 33 { 34 var plist = con.Computer.Where(r => Convert.ToInt32(r.price) >= sprice1); 35 clist = clist.Intersect(plist); 36 } 37 if (sprice2 != 0) 38 { 39 var plist2 = con.Computer.Where(r => Convert.ToInt32(r.price) <= sprice2); 40 clist = clist.Intersect(plist2); 41 } 42 end = "{"cn":"" + clist.Count() + ""}"; 43 } 44 context.Response.Write(end); 45 context.Response.End(); 46 }