首页 > 其他 > 详细

datatable使用笔记

时间:2015-05-26 19:17:49      阅读:368      评论:0      收藏:0      [点我收藏+]

页面向后台传数据:

        var oTable = $(‘#sample_2‘).dataTable( {
            "aoColumnDefs": [
                { "aTargets": [ 0 ] }
            ],
            "aaSorting": [[1, ‘asc‘]],
             "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "全部"] // change per page values here
            ],
            // set the initial value
            bPaginate : true,          //  是否分页,默认为 true,分页
            bLengthChange : true,     //  是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10,25,50,100。这个设置需要 bPaginate 支持。默认为 true。
            "iDisplayLength": 10,
            "bProcessing": true,
            "sAjaxSource" : "../../appcontroller/applist.json?currpage=1&pagesize=10",
            "sAjaxDataProp" : "list",
            "bServerSide" : true, // 异步请求必须设置
            // "sPaginationType": "full_numbers",
            "aoColumns": [
                {"mDataProp":"id"},
                {"mDataProp":"icon",
                    "mRender": function(data, type, full) {
                        return ‘<img style="max-width: 57px;max-height: 57px;" src=‘ + data + ‘ />‘;
                    }
                },
                {"mDataProp":"title"},
                {"mDataProp":"price"},
                {"mDataProp":"createtime"},
                {"mDataProp":"updatetime"},
                {"mDataProp":"state",
                    "mRender": function(data, type, full) {
                        var value = "已发布"
                        if ("0" == data){
                            value = "草稿"
                        } else if("-1" == data){
                            value = "已删除"
                        }
                        return value
                    }
                }
            ],
            "fnServerData" : function(sSource, aoData, fnCallback){
                $.ajax({
                    "type" : "get",
                    "contentType" : "application/json",
                    "url" : sSource,
                    "dataType" : "json",
                    "data" : {
                        aoData :JSON.stringify(aoData)
                    }, // 以json格式传递
                    "success" : function(resp) {
                        if(resp){
                            fnCallback(resp);
                        } else {
                            fnCallback({"list":[]});
                        }
                    }
                })
            },
            "oLanguage": {
                "sProcessing": "正在加载中......",
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "对不起,查询不到相关数据!",
                "sEmptyTable": "表中无数据存在!",
                "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                "sSearch": "搜索",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            } //多语言配置
        });


后台解数据:

        $aoData = $_GET[‘aoData‘];
        $sEcho = 1;
        $iDisplayStart = 0;     <span style="white-space:pre">    </span>// 开始下标
        $iDisplayLength = 10;           <span style="font-family: Arial, Helvetica, sans-serif;">//   每页记录数(这两个参数是从前台传过来的,用作分页查询)</span>
        if($aoData) {
            $aoDataJson = json_decode($aoData);
            foreach($aoDataJson as $value) {
                $nameKey = $value->name;
                $valueKey = $value->value;
                if($nameKey == "sEcho") {
                    $sEcho = $valueKey;
                } elseif($nameKey == "iDisplayStart") {
                    $iDisplayStart = $valueKey;
                } elseif($nameKey == "iDisplayLength") {
                    $iDisplayLength = $valueKey;
                }
            }
        }
        $title = $_GET[‘title‘];
        $is_offline = $_GET[‘is_offline‘];
        $state = $_GET[‘state‘];
        $pagesize = $iDisplayLength and $iDisplayLength or $_GET[‘pagesize‘];
        $currpage =$sEcho and $sEcho or $_GET[‘currpage‘];
        ! $pagesize && $pagesize = 12;
        ! $currpage && $currpage = 1;
        $condition = array();
        $title && $condition[‘title‘] = $title;
        $is_offline && $condition[‘is_offline‘] = $is_offline;
        $state && $condition[‘state‘] = $state;
        $pagesize && $condition[‘pagesize‘] = $pagesize;
        $currpage && $condition[‘currpage‘] = $currpage;
        $service = $this->App_model->findListApp($condition);
        $service[‘returncode‘] = ‘000000‘;
        $service[‘iTotalRecords‘] = 3;           // 总记录数
        $service[‘iTotalDisplayRecords‘] = 30;   // 当前页包含的记录数(这两个是必须返回的)
        return $service;


datatable使用笔记

原文:http://my.oschina.net/JKOPERA/blog/420163

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!