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

时间：2022-09-23 21:07:21

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;




 


														
		
基于bootstrap 的datatable插件的使用2（php版）的更多相关文章
	

    

  1. 
基于bootstrap 的datatable插件的使用（php版）
		
    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...
    
		
    2. 
								
  2. 
bootstrap-paginator基于bootstrap的分页插件
		
    bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...
    
		
    3. 
						
  3. 
基于Bootstrap的对话框插件bootstrap-dialog
		
    写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
    
		
    4. 
						
  4. 
基于bootstrap的分页插件
		
    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js.  ...
    
		
    5. 
						
  5. 
基于Bootstrap的DropDownList的JQuery组件的完善版
		
    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
    
		
    6. 
						
  6. 
基于bootstrap的bootstrap-editable插件实现即时编辑功能
		
    1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet"  ...
    
		
    7. 
						
  7. 
基于bootstrap的双日历插件 daterangepicker
		
    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
    
		
    8. 
						
  8. 
基于Bootstrap的表格插件bootstrap-table
		
    写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...
    
		
    9. 
						
  9. 
基于bootstrap的时间选择插件daterangepicker以及汉化方法
		
    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
    
		
    10. 
		


随机推荐
	

    

  1. 
iOS删除本地文件
			
    以前在博客里记录的东西都是截屏,没有插入代码,今天进去一看,图片都不显示了,只好重新插入代码,发现以前写的文件操作这块,没有写本地文件删除这个功能,重新再记录一下 //需要删除文件的物理地址 NSSt ...
    
			
    2. 
						
  2. 
sublime Text 2 安装Sublime Package Control
			
    Sublime Text 2 安装 Sublime Package Control,通过 Sublime Package Control,安装.升级和卸载 Package. 安装 Package Co ...
    
			
    3. 
						
  3. 
Google NACL 简介
			
    Back to README Getting Started This page tells you how to install Native Client and run demos, both  ...
    
			
    4. 
						
  4. 
jeecg项目子窗口获得父窗口元素id
			
    jeecg项目子窗口获得父窗口元素id, var parentWin = frameElement.api.opener;alert($(parentWin.document).find(" ...
    
			
    5. 
						
  5. 
C&num;字符串和数组互转
			
    string str = "a,b,c,d,e";             string[] strArray = str.Split(','); //字符串转数组         ...
    
			
    6. 
						
  6. 
Ubuntu16系统中安装htpasswd
			
    htpasswd是Apache附带的程序, htpasswd生成包含用户名和密码的文本文件, 每行内容格式为“用户名:密码”, 用于用户文件的基本身份认证. 当用户浏览某些网页的时候, 浏览器会提示输 ...
    
			
    7. 
						
  7. 
牛客网 python 求解立方根
			
    •计算一个数字的立方根,不使用库函数 详细描述: •接口说明 原型: public static double getCubeRoot(double input) 输入:double 待求解参数 返回 ...
    
			
    8. 
						
  8. 
js sort方法根据数组中对象的某一个属性值进行排序
			
    sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp' ...
    
			
    9. 
						
  9. 
Yii2 数据库查询汇总
			
    1.基础查询 User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find( ...
    
			
    10. 
						
  10. 
C&num;版Aliyun DNS API
			
    阿里云解析API,是为域名开发者.注册商.域名代理商等提供的开放和便捷的解析服务接口.API依托于万网云解析服务,可以方便的管理域名和解析记录,让你的解析管理变的随心省时*舒畅. 一.先附上Aliy ...
    
			
    11. 
			
相关文章