zoukankan html css js c++ java

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

DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
　　客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
　　服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

ajax从后台获取数据（两种数组方式）：

第一种方式：

前端：

<!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>

　　后端：

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

查看全文

相关阅读:
hdu 4614 线段树二分
 cf 1066d 思维二分
 lca 最大生成树逆向思维 2018 徐州赛区网络预赛j
rmq学习
 hdu 5692 dfs序线段树
 dfs序介绍
 poj 3321 dfs序树状数组前向星
 cf 1060d 思维贪心
 【PAT甲级】1126 Eulerian Path (25分)
【PAT甲级】1125 Chain the Ropes (25分)

原文地址：https://www.cnblogs.com/c-961900940/p/6222905.html