首頁 > 後端開發 > php教程 > PHP+MySQL+LayUI分頁查詢顯示

PHP+MySQL+LayUI分頁查詢顯示

autoload
發布: 2023-04-09 21:02:02
轉載
2802 人瀏覽過

    html建立前端樣式,AJAX非同步請求數據,再使用layui.table資料表的方法渲染,這樣就完成了分頁查詢顯示。

  •     html建立前端樣式

  •  AJAX非同步請求資料

  • ##    使用

    layui.table
  • 資料表的方法來渲染。

1.HTML檔案

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;p&gt;         &lt;/p&gt;</pre><div class="contentsignin">登入後複製</div></div> <table></table>         <p></p>

<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>    從前端取得page和limit兩個變量,並交給MySQL中的limit

進行分頁查詢,將查詢的結果拼裝後以前端LayUI框架規定的json形式傳回。 2.laypage.php 檔案

     laypage.php 功能是取得資料總數並回傳給前端展示。

<?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);
?>
登入後複製
3.paging.php 檔案

#    laypage.php 功能是根據前端傳遞的變數指定參數分頁查詢資料並傳回前端展示。

<?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;
    ?>
登入後複製
PHP+MySQL+LayUI分頁查詢顯示最終頁面效果如下所示:

#推薦:#《2021年PHP面試題大匯總(收藏)》《php影片教學

#》 ######

以上是PHP+MySQL+LayUI分頁查詢顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板