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;

查看全文

相关阅读:
【微信小程序】数组操作
 iOS中html打开APP传参
 给radio加自己的样式（图片）
TCP和IP的三次握手和第四次挥手
 什么是HTTP协议
 http和https的区别
 微信小程序-点击图片预览
 JAVASE
thinkphp自学笔记
 前端必须掌握的30个CSS选择器

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