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

PHP+MySQL+LayUI-Paging-Abfrageanzeige

autoload
Freigeben: 2023-04-09 21:02:02
nach vorne
2798 Leute haben es durchsucht

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>
Nach dem Login kopieren
        

<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);
?>
Nach dem Login kopieren
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;
    ?>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage