Heim >Backend-Entwicklung >PHP-Tutorial >PHP+MySQL+LayUI-Paging-Abfrageanzeige

PHP+MySQL+LayUI-Paging-Abfrageanzeige

autoload
autoloadnach vorne
2021-04-12 16:17:002801Durchsuche

html erstellt den Front-End-Stil, AJAX fordert Daten asynchron an und verwendet dann die layui.table-Daten Tabellenmethode zum Rendern. Damit ist die Anzeige der Paging-Abfrage abgeschlossen. html构建前端样式,AJAX异步请求数据,再使用layui.table数据表格的方法渲染,这样就完成了分页查询显示。

  •     html构建前端样式

  •  AJAX异步请求数据

  •     使用layui.table数据表格的方法渲染。

1.HTML文件

<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

  • htmlBuild-Front-End-Stil

  • AJAX Asynchrone Anforderungsdaten
  • werden mithilfe der Datentabellenmethode layui.table gerendert.

1.HTML-Datei

<?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);
?>
Holen Sie sich die beiden Variablen page und limit vom Frontend und geben Sie sie an limit in MySQL für die Paging-Abfrage weiter. und Abfrage Die Ergebnisse werden zusammengestellt und im vom Front-End-LayUI-Framework angegebenen JSON-Format zurückgegeben.

2.laypage.php-Datei


PHP+MySQL+LayUI-Paging-Abfrageanzeige
Die Funktion vonlaypage.php besteht darin, die Gesamtzahl der Daten abzurufen und sie zur Anzeige an das Frontend zurückzugeben.

<?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;
    ?>

3.paging.php-Datei Die Funktion vonlaypage.php besteht darin, die Daten in Seiten gemäß den vom Frontend übergebenen variablen angegebenen Parametern abzufragen und sie zur Anzeige an das Frontend zurückzugeben. rrreeeDer endgültige Seiteneffekt ist wie folgt:

Empfohlen: 🎜《🎜🎜2021 PHP-Interviewfragenzusammenfassung (Sammlung)🎜🎜》《🎜🎜php-Video-Tutorial🎜🎜》 🎜🎜🎜🎜

Das obige ist der detaillierte Inhalt vonPHP+MySQL+LayUI-Paging-Abfrageanzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen