Use ajax to implement paging technology and ajax to implement Paging

Use ajax to implement paging technology and ajax to implement Paging

The ajax page is as follows:

First, let's first look at the HTML code and CSS code. We need a table and a footer:

<Div id = "global"> <div id = "table"> <table> <col width = "19%"> <col width = "19%"> <col width =" 19% "> <col width =" 19% "> <col width =" 24% "> <tr> <th> date </th> <th> time </th> <th>> event </th> <th> alert screen </th> <th> event remarks </th> </tr> </table> </div> <div id = "footer"> <span id = "summary"> </span> <ul id = "pagination"> <li id = "01"> homepage </li> <li id = "02"> previous page </li> <li id = "03"> next page </li> <li id = "04"> last page </li> </ ul> <div id = "select"> <span> jump to </span> <input type = "text" name = "page_num"> <span> page </span> <input type = "button" name = "go_btn" value = ""> </div>

The following is the css code:

#global{ position: relative;}#table{ position: absolute; top:19%; left:1.6%; width: 55%;}#table textarea{ width: 10vw; height: 10vh; background-color: transparent; color: #fff; border-width: 0; text-align: center;}table, th, td { border: 0.2px solid rgba(60,166,206,0.2); border-collapse: collapse; color:rgba(60,166,206,1); }th, td { padding: 3px; text-align: center; font-size: 1.6vmin;}td{ background: rgba(2,29,54,1);}th{ background: rgba(20,29,54,1); padding: 1.8% 0; color: rgba(255,255,255,0.8);}#footer{ position: absolute; bottom:5vh; left:7vw; text-align: center; color: rgba(60,166,206,1);}#pagination{ display: inline-block;}#pagination li{ display: inline;}#select{ display: inline-block; margin-left: 40px;}#select input[type="text"]{ width: 30px; height: 20px; background-color: #000; border-width: 1px;}#select input[type="button"]{ width: 40px; height: 23px; background: #000; border:none;}ul li{ cursor: pointer;}

Initialize the start date, end date, number of pages requested, number of pages requested, total number of pages of data, and send the data to the API data interface provided by the background through ajax, then, the data is obtained from the database and displayed on the front-end:

var start_date = "2017-01-01", end_date = "2017-01-08";var pageNo = 1;var pageSize = 4;var pages = 0;

How can I obtain table data and append it to the front-end? How do I obtain paging data and append it to the front-end? Use the functions defined below:

LoadData (pageNo, pageSize );

Next, let's take a look at how this function communicates with the API data interface:

Function loadData (pageNo, pageSize) {$ (". detail "). remove (); // clear the content of the original table '<tr>' First each time you obtain data from the API data interface again $. ajax ({url: "/history_alarm", type: "POST", data: JSON. stringify ({date: date, page_num: pageNo, page_size: pageSize}), success: function (result) {var results = JSON. parse (result); var list = results. alarm; var totalCount = results. alarm_count; pages = results. page_count; if (list. length! = 0) {for (var I = 0; I <list. length; I ++) {var alarm_id = list [I]. alarm_id; var alarm_pic = list [I]. alarm_pic; var date = list [I]. date; var event = list [I]. event; var time = list [I]. time; var remark = list [I]. remark; appendData (alarm_id, alarm_pic, date, event, time, remark); addEvent (alarm_id) ;}$ ("# table "). show (); $ ("# footer "). show (); displayFooter (totalCount, pages, pageNo);} else {$ ("# table "). hide (); $ ("# footer "). hide () ;}}, error: function () {// error handle function }});}

In the loadData function, we also define the other three functions. Next let's look at appendData:

// Note that we use 'arm _ id' as the value of '<textarea> ''class' and as the value of 'id' of the submit button, this is because we need to use ajax to pass the user input to a certain '<textarea>' value as a parameter to the background API interface and write it into the database. Function appendData (alarm_id, alarm_pic, date, event, time, remark) {var text = '<tr class = "detail"> <td>' + date + '</td> <td>' + time + '</td <td>' + event + '</td>' + '<td>  '+' <td class = "modity_btn"> <textarea cols = "5" rows = "3" class = '+ alarm_id +'> '+ remark +' </textarea> '+'  </td> </tr> '; $ (" # table "). append (text );}

// This function defines how to use ajax to pass the value of the user input to a certain '<textarea>' as a parameter to the background API interface, and write the database function addEvent (alarm_id) {$ ("#" + alarm_id ). click (function () {var remark = $ (". "+ alarm_id ). val (); if (remark! = "") {$. Ajax ({url: "/history_alarm", type: "POST", data: JSON. stringify ({alarm_id: alarm_id, note: remark}), success: function (result) {var results = JSON. parse (result); if (results. status = "OK") {console. log ('OK ');}}})}})}

Function displayFooter (totalCount, pages, pageNo) {var newText = 'Total' + totalCount + ',' + ''+ pageNo + 'page, '+ 'col' + pages + 'page'; $ ("# summary "). text (newText );}

After writing the function for getting data, you need to click the corresponding event on the "homepage, Previous Page, next page, last page, and jump" page. The idea is as follows: You need to re-Judge pageNo when you click on each project on the page, and then use pageNo as the parameter to call the data retrieval API again:

$("input[name='page_num']").keydown(function(e){ if(e.keyCode == 13){ $("input[name='go_btn']").click(); } });$("input[name='go_btn']").click(function(){ var goPage = $("input[name='page_num']").val(); if(goPage >= 1 && goPage <=pages && goPage != pageNo){  pageNo = goPage;  loadData(pageNo, pageSize); } else{  return false; }});$("#01").click(function(){ pageNo = 1; loadData(pageNo, pageSize);});$("#04").click(function(){ pageNo = pages; loadData(pageNo, pageSize);});$("#02").click(function(){ if(pageNo == 1){  return false; } else{  pageNo--;  loadData(pageNo, pageSize); }});$("#03").click(function(){ if(pageNo == pages){  return false; } else{  pageNo++;  loadData(pageNo, pageSize); }});

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.