ajax分页与组合查询配合使用

使用纯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         &nbsp;价格<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         当前第&nbsp<span id="nowye">1</span>&nbsp页&nbsp&nbsp共&nbsp<span id="allye"></span>&nbsp页
30         <input id="btn_first" type="button" value="首页" />&nbsp<input id="btn_prev" type="button" value="上一页" />&nbsp<input type="button" id="btn_next" value="下一页" />&nbsp<input type="button" id="btn_end" value="末页" />
31         <select id="dr1"></select>
32     </div>
33 </body>
HTML代码

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>
View Code
 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     }
com.ashx
 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     }
allcom.ashx
原文地址:https://www.cnblogs.com/1711643472qq/p/6179625.html