PHP+MySQL+LayUI 페이징 쿼리 표시

autoload
풀어 주다: 2023-04-09 21:02:02
앞으로
2752명이 탐색했습니다.

html은 프런트 엔드 스타일을 빌드하고 AJAX는 비동기적으로 데이터를 요청한 다음 layui.table 데이터를 사용합니다. 테이블 메소드를 렌더링하여 페이징 쿼리 표시를 완료합니다. 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

  • html프런트 엔드 스타일 구축

  • AJAX 비동기 요청 데이터
  • layui.table 데이터 테이블 메소드를 사용하여 렌더링됩니다.

1.HTML 파일

<?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);
?>
로그인 후 복사
프런트 엔드에서 두 개의 변수 페이지 및 제한을 가져오고 페이징 쿼리를 위해 MySQL에서 limit에 제공합니다. 및 쿼리 결과는 프런트 엔드 LayUI 프레임워크에서 지정한 json 형식으로 조합되어 반환됩니다.

2.laypage.php 파일


PHP+MySQL+LayUI 페이징 쿼리 표시
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;
    ?>
로그인 후 복사

3.paging.php 파일 laypage.php의 기능은 프런트 엔드에서 전달한 변수 지정 매개 변수에 따라 페이지의 데이터를 쿼리하고 프런트 엔드에 반환하여 표시하는 것입니다. rrreee최종 페이지 효과는 다음과 같습니다.

추천: 🎜 《🎜🎜2021 PHP 면접 질문 요약(모음)🎜🎜》 《🎜🎜php 튜토리얼🎜🎜》🎜🎜🎜 🎜

위 내용은 PHP+MySQL+LayUI 페이징 쿼리 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿