基於bootstrap 的datatable插件的使用2（php版）

時間 2019-11-10

標籤基於 bootstrap datatable 插件使用 php 欄目 Bootstarp 简体版

原文原文鏈接

DataTables 中有兩種不一樣的方式處理數據(排序、搜索、分頁等):
　　客戶端處理（Client）—— 全部的數據集預先加載（一次獲取全部數據），數據處理都是在瀏覽器中完成的【邏輯分頁】。
　　服務器端處理（ServerSide）—— 數據處理是在服務器上執行（頁面只處理當前頁的數據）【物理分頁】。php

ajax從後臺獲取數據（兩種數組方式）： css

第一種方式：html

前端：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> -->
    <link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/jquery.dataTables.min.js"></script>
    <script src="./js/dataTables.bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table id="DataTable" class="display table table-striped table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        $(function(){
            $('#DataTable').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "./server.php",
                    "type": "POST",
                    "data": function ( d ) {        //添加額外的參數發送到服務器
                        d.extra_search = 3;
                    }
                }
            } );
        })
    </script>
</body>
</html>

後端：

<?php
$data = array();
//$data['draw'] = 1;
$data['recordsTotal'] = 5;
$data['recordsFiltered'] = 5;
$data['data'] = array(
    array("1","Airi","Satou","Accountant","Tokyo","2008/11/28",162700),
    array("2","Angelica","Ramos","Chief Executive Officer (CEO)","London","2009/10/09",1200000),
    array("3","Ashton","Cox","Junior Technical Author","San Francisco","2009/01/12",86000),
    array("4","Bradley","Greer","Software Engineer","London","2012/10/13",132000),
    array("5","Bradley","Greer","Software Engineer","London","2012/10/13",132000)
);
shuffle($data['data']);      //模擬數據庫獲取數據  echo json_encode($data);exit;

第二種方式：前端

前端：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> -->
    <link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/jquery.dataTables.min.js"></script>
    <script src="./js/dataTables.bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <table id="DataTable" class="display table table-striped table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
        </table>
    </div>
    
    <script>
        $(function(){
            $('#DataTable').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "./server.php",
                    "type": "POST",
                    "data": function ( d ) {        //添加額外的參數發送到服務器
                        d.extra_search = 3;
                    }
                },
                "columns":[
                      {"data":"id"},
                      {"data":"name"},
                      {"data":"age"}
                  ]
            } );
        })
    </script>
</body>
</html>

　　後端：jquery

<?php
$data = array();
//$data['draw'] = 1;
$data['recordsTotal'] = 5;
$data['recordsFiltered'] = 5;
$data['data'] = array(
    array("id"=>"1","name"=>"Airi","age"=>"Satou"),
    array("id"=>"2","name"=>"Angelica","age"=>"Ramos"),
    array("id"=>"3","name"=>"Ashton","age"=>"Cox"),
    array("id"=>"4","name"=>"Bradley","age"=>"Greer"),
    array("id"=>"5","name"=>"Bradley","age"=>"Greer")
);
shuffle($data['data']);
echo json_encode($data);exit;

相關標籤/搜索