PHP+MySQL+LayUI paging query display

autoload
Release: 2023-04-09 21:02:02
forward
2700 people have browsed it

##htmlBuild the front-end style, AJAXrequest data asynchronously, and then uselayui.table Method rendering of data table, thus completing the paging query display.

  • htmlBuild front-end style

  • AJAXAsynchronous request data

  • Use the

    layui.table data table method to render.

1.HTML file

<p>
        </p>
Copy after login
        

<script></script><script> var pageNum = 0; var limit = 10; var page = 1; $.ajax({ url: "laypage.php", async: false, type: "post", success: function (res) { pageNum = res; //取到数据总条数 // console.log(res) } }); layui.use(&#39;table&#39;, function () { var table = layui.table; table.render({ elem: &#39;#demo&#39;, method: &#39;post&#39;, url: &#39;paging.php&#39;, limit: limit, page: page, cellMinWidth: 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增 cols: [[ {checkbox: true}, {field: &#39;id&#39;, width: 80, sort: true, title: &#39;ID&#39;}, {field: &#39;donor&#39;, width: 240, sort: true, title: &#39;姓名/昵称&#39;}, {field: &#39;object&#39;, width: 180, sort: true, title: &#39;捐助项目&#39;}, {field: &#39;money&#39;, width: 150, sort: true, title: &#39;捐助金额&#39;}, {field: &#39;time&#39;, width: 200, sort: true, title: &#39;捐助时间&#39;}, {field: &#39;type&#39;, width: 100, sort: true, title: &#39;捐助类型&#39;}, {field: &#39;message&#39;, width: 200, title: &#39;备注/留言&#39;} ]] }); });</script> Get the page and limit variables from the front end and give them to MySQL

limit Perform paging query, assemble the query results and return them in the json format specified by the front-end LayUI framework.

2.laypage.php file

The function of laypage.php is to get the total number of data and return it to the front-end for display.

<?php     require (&#39;db_config.php&#39;);
    $sql = &#39;select count(*) from donation_copy1&#39;;
    $result = $mysqli->query($sql);
    $sum = mysqli_fetch_row($result);
    echo ceil($sum[0]/1);
?>
Copy after login

3.paging.php file

The function of laypage.php is to query the data in pages according to the variables passed by the front end and return it to the front end. exhibit.

<?php     header("content-type:text/html;charset=utf-8;");
    require (&#39;db_config.php&#39;);$limit = $_POST[&#39;limit&#39;];
    $page = $_POST[&#39;page&#39;];$new_page = ($page - 1)*$limit;
    $sql = "select * from donation_copy1 order by id desc limit " .$new_page.",".$limit;
    $result = $mysqli->query($sql);
    $sql2 = 'select * from donation_copy1';
    $count = mysqli_num_rows($mysqli->query($sql2));
    $arr = array();
    while ($row = mysqli_fetch_array($result)) {  
    $arr[] = $row;}$donation_data = array(  // 拼装成为前端需要的JSON
    'code'=>0,
    'msg'=>'',
    'count'=>$count,
    'data'=>$arr);
    echo json_encode($donation_data);
    //echo $sql;
    ?>
Copy after login
The final page effect is as follows:


PHP+MySQL+LayUI paging query display

Recommended: 2021 PHP Summary of interview questions (collection)》《php video tutorial

The above is the detailed content of PHP+MySQL+LayUI paging query display. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!