datatables的服务器模式-php

阅读次数: 5,448

  • A+
所属分类:PHP PHP 建站 语言学习

不得不说这个插件很方便,几千行的数据展示速度很快,搜索也不损耗服务器性能,分页也没的说。但是数据量过大时就需要用到服务器模式了,找了半天没有发现很好的例子。官网上的比较简陋。

有人说这是前端的事情,不这也是后端需要了解的知识。

不多说了直接上代码


前端:

<?php
/**
 * Created by 大师兄
 * 派系: 神秘剑派
 * 技能: zxc秒杀
 * Date: 2018/3/22
 * Time: 11:22
 * QQ:  997823131 
 */
defined('InCosmos') or exit('Access Invalid!');?>


<!-- Data Tables start -->
<link href="<?php echo BBS_RESOURCE_SITE_URL;?>/bootstrap/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

<script src="<?php echo BBS_RESOURCE_SITE_URL;?>/bootstrap/js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="<?php echo BBS_RESOURCE_SITE_URL;?>/bootstrap/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="<?php echo BBS_RESOURCE_SITE_URL;?>/bootstrap/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<!-- Data Tables end -->

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>基本 <small>分类,查找</small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="table_data_tables.html#">选项1</a>
                            </li>
                            <li><a href="table_data_tables.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <table id="dataTables-example" class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>渲染引擎</th>
                            <th>浏览器</th>
                            <th>平台</th>
                            <th>引擎版本</th>
                            <th>CSS等级</th>
                            <th>CSS等级</th>
                            <th>CSS等级</th>
                            <th>CSS等级</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="gradeX">
                            <td>Trident</td>
                            <td>Internet Explorer 4.0
                            </td>
                            <td>Win 95+</td>
                            <td class="center">4</td>
                            <td class="center">X</td>
                            <td class="center">X</td>
                            <td class="center">X</td>
                            <td class="center">X</td>
                        </tr>
                        <tr class="gradeC">
                            <td>Trident</td>
                            <td>Internet Explorer 5.0
                            </td>
                            <td>Win 95+</td>
                            <td class="center">5</td>
                            <td class="center">C</td>
                            <td class="center">C</td>
                            <td class="center">C</td>
                            <td class="center">C</td>
                        </tr>

                        </tfoot>
                    </table>

                </div>
            </div>
        </div>
    </div>

</div>

<script>
    function show_info(e){
        var table_data = $('#dataTables-example').DataTable();
        var data = table_data.row($(e).parent().parent('tr')).data(); // 获取列表
        var store_id = data['area_id'];
        console.log(store_id);
    }


$(function(){
    $('#dataTables-example').DataTable(//创建一个Datatable
        {
            ajax : {//通过ajax访问后台获取数据
                "url": ApiUrl + "/index.php?act=admin_user&op=user_list",//后台地址
                "type":'GET',
                "dataSrc": function (json) {//获取数据之后处理函数,jason就是返回的数据
                    var dataSet = new Array();
                    dataSet=json.data;
                    return dataSet;//再将数据返回给datatable控件使用
                }
            },
            serverSide: true,//如果是服务器方式,必须要设置为true
            processing: true,//设置为true,就会有表格加载时的提示
            columns : [ {"data" : "area_id"}, //各列对应的数据列
                {"data" : "area_name"},
                {"data" : "area_parent_id"},
                {"data" : "area_sort"},
                {"data" : "area_deep"},
                {"data" : "area_deep"},
                {"data" : "area_deep"},
                {"data" : null} ],
            columnDefs : [ {//列渲染,可以添加一些操作等
                targets : 7,//表示是第8列,所以上面第8列没有对应数据列,就是在这里渲染的。
                render : function(data, type, row) {//渲染函数
                    var html = '&nbsp;<button type="button" class="btn btn-info btn-sm" onclick="show_info(this);">修改</button>';//这里加了两个button,一个修改,一个删除
                    return html;//将改html语句返回,就能在表格的第8列显示出来了
                }
            },{
                orderable:false,//禁用排序
                targets:[1,2,3,5,6]   //指定的列
            }
            ],
            "language": {//国际化
                "processing":"<p style=\"font-size: 20px;color: #F79709;\">正在玩命加载中。。。。请稍后!</p>",//这里设置就是在加载时给用户的提示
                "lengthMenu": "_MENU_ 条记录每页",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "paginate": {
                    "previous": "上一页",
                    "next": "下一页"
                }
            },
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +"t" +"<'row'<'col-xs-6'i><'col-xs-6'p>>",//给表格改样式
             initComplete : function() {//表格完成时运行函数
//             $("#mytool").append('<button type="button" class="btn btn-warning btn-sm" id="importfilebutton" onclick="jumpimportfilepage();">添加</button>');//这里在表格的上面加了一个添加标签
             }
        });
});



</script>

</body>
</html>

 

后台:

/* 用户的列表 start */
    public function user_listOp(){
        $db_bbs_user = new Model("area");

        $where = array("area_name"=>array('like',"%{$_GET['search']['value']}%"));
        $db_draw = intval($_GET['draw']);
        $db_start = $_GET['start'] ? $_GET['start'] : 0;
        $db_length = $_GET['length'] ? $_GET['length'] : 10;
        $db_limit = $db_start.",".$db_length;
        $db_total = $db_bbs_user->where($where)->count();
        $data_bbs_user = $db_bbs_user->where($where)->order()->limit($db_limit)->select();

        ajaxReturn(array('draw'=>$db_draw,'recordsTotal'=>$db_total,'recordsFiltered'=>$db_total,'data'=>$data_bbs_user),"json");
    }
    /* 用户的列表 end */

数据库结构

datatables的服务器模式-php

 

其中 order  条件  的where 条件 可以根据自己的需求来自定义添加

还有一个重要的点就是  自定义 表内的 数据时  有两种方法:

columnDefs : [ {//列渲染,可以添加一些操作等
                targets : 7,//表示是第8列,所以上面第8列没有对应数据列,就是在这里渲染的。
                render : function(data, type, row) {//渲染函数
                    var html = '&nbsp;<button type="button" class="btn btn-info btn-sm" onclick="show_info(this);">修改</button>';//这里加了两个button,一个修改,一个删除
                    return html;//将改html语句返回,就能在表格的第8列显示出来了
                }
            },{
                orderable:false,//禁用排序
                targets:[1,2,3,5,6]   //指定的列
            }
            ]

这个在 colums 参数 之外 是一个单独的参数 columnDefs 这个参数

或者:

{ data:null,render:function(e){
                        return "<span  value='' class='show_span'><em style='width:"+ e.point+";' class='show_em' ></em></span>";
                    }},
                    { data: 'store_user_phone' },//电话
                    { data: null,
                        "defaultContent":"<a  onclick='goods_edit(this)'><i class='fa fa-edit'></i>查看详情</a>",
                        render:function(){}
                    }

这个实在 colums 参数内的 推荐用这个

效果:datatables的服务器模式-php

 

中文API 文档地址 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: