javascript - How to achieve the non-refresh paging effect of ajax and js

Implement the paging effect of ajax data request: similar to the picture! How to implement the code

Reply content:

Implement the paging effect of ajax data request: similar to the picture! How to implement the code

ajax requests the data of a certain page, then clears the table, and then puts the new data into the table.

1. Create paging style with css;
2. Listen to the event, pass the paging parameter pageNo, and write the reassembly and rendering of the list in the ajax callback.

The idea is to make an ajax request when the paging event is triggered, and then update the table after success:

<code>ele.onclick = function() {  //假设ele是点击后触发分页的元素
    var index = ele.pageIndex;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'URL', true);//URL应包含分页信息，比如pageIndex，pageSize等
    xhr.onreadystatechange = function() {
        if ( xhr.status == 200 && xhr.readyState == 4 ) {
            updateTable(xhr.responseText);  //这个updateTable就是你用来更新表格的方法，在本页面执行，不会刷新
        }
    }
    xhr.send('');
}</code>

When clicking on the page number:

• Front-end passed values: currentPage (which page is currently requested), perPage (how many pieces of data per page);

• Backend return value: pages (total number of pages), data (returned data);

• When the front end requests data for the first time, it displays the page turning bar on the front end based on the total number of pages returned by the back end; if data binding is not used, such as react, vue, knockout, etc., it will be cleared on the next request. Just insert html in a loop. If data binding is used, you only need to reset the returned data to re-render the page.

I think the question subject should master four points of knowledge:

1. ajax

2. php paging technology

3. mysql limit

4. jquery

Detailed explanation:

1. ajax When you click on the page number, a click(jQuery) event is triggered, and then the value of the page number is obtained and sent to the backend

2. php receives the parameters of this page number and calculates it based on the current page number and the number of displayed items

<code>$page = $_GET['page'];  //当前页码
$page_num = 12;         //显示条数
$offect = $page_num * ( $page - 1 );    

$sql = "select * from table limit $offset,$page_num";  //3、sql的limit语法

//组装成html返回给前台


echo $html;exit;

</code>

4. Just replace the div corresponding to the list content on the front end.

This is an old method, I don’t know what the latest method is.

Above. By the way, Baidu has a lot of resources for this kind of problem. Really, I’m not lying to you.

Please check the api for usage of ajax
As for pagination without refresh, you only need to clear and replace the data in the table area. The questioner has a look at jquery and it can basically be achieved. It is very simple...