datatable 高级用法

本文地址：http://tongxinmao.com/Article/Detail/id/143

加上CLASS即可得到本地可排序 搜索分页的表格
 <table class="table table-striped table-bordered bootstrap-datatable datatable responsive">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var table = $('#example').DataTable( {
                "dom": "rtlip"    ,  // "dom": '<"wrapper"flipt>'   //"rtlip"  //"dom": '<lf<t>ip>' //'<"top"i>rt<"bottom"flp><"clear">'
                /*l - 每页显示行数的控件
                f - 检索条件的控件
                t - 表格控件
                i - 表信息总结的控件
                p - 分页控件
                r - 处理中的控件
                B - buttons
                */
                 
                 
                "processing": true,//加载提示
                serverSide: true,
                "ajax": {
                    "url":"/Device/",
                    "data": function ( d ) {
                        //添加额外的参数传给服务器
                        d.extra_search = 222;// $('#reportrange span').html();
                        d.mid=$("#mid").val();
                    }},
 
                paging: true,
                "pagingType":"full_numbers",
               // "order": [],, ////取消默认排序查询,否则复选框一列会出现小箭头
                //autoWidth: false,   //禁用自动调整列宽
                "lengthMenu":[10,25,50,100],
                "searching": true,
 
                "renderer": "bootstrap",
                "rowId": "DT_RowId",
                "columns":[ //定义列数据来源
                    {'data':null,'class':"align-center"}, // 自定义列
                    {'data':function(obj){
                        return '<a href="/Device/Detail/id/'+obj.id+ '">'+obj.mid+'</a>';
                    }
                    },
                    {'data':"type"},//隐藏
                    {'data':"version"},
                    {'data':"time"},
                    {'data':"note"},
                    {'data':null,'class':"align-center"} // 自定义列
 
                ],
                "columnDefs": [ //自定义列
                    {
                        "targets": -1, //改写哪一列
                        "data": "id",
                        "render": function ( data, type, row, meta ) { //The data for the cell , 'filter', 'display', 'type' or 'sort'.
                            // return "<a href='"+full.teacher_id+"'>look at my href</a>";
                            var html = "<button class='btn btn-info' onclick='edit("+row.id+")'>修改</button>" + "   <button name='btn-del' class='btn btn-danger' onclick='del("+row.id+")'>删除</button>";
                            return html;
                        }
 
                    },
 
                    {
                        "targets":[-1,-2],
                        "orderable":false,  //禁止排序
                       // visible":true, //隐藏列
                        //"searchable":false, //禁止搜索
                        //width : "80px"
                        //defaultContent:"",
                    },
                    {
                        "targets":0,
                        "render": function(data, type, row, meta) {//The data for the cell , 'filter', 'display', 'type' or 'sort'.
                           return meta.row+1;
                        }
                    },
 
                ],
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json"
                }
 
 
            } );
 
            $("#query").click(function() {
                table.ajax.reload();
 
            });



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 if(g('draw')==''){
            $this->display();
            return;
        }
 
 
        //http://www.w3cfuns.com/notes/16811/278151cce7baf16d3c7ed8e830dde70e.html
//http://datatables.club/example/user_share/basic_curd.html
////获取Datatables发送的参数 必要
 
 
        $orm = ORM::for_table('sbt_device');
 
        //搜索
        if(g("mid")!=''){
            $orm=$orm->where("mid",g("mid"));
            //$orm=$orm->where_like('sn', "%".$search."%");
        }
 
        //排序
        /*
        if(isset( $_REQUEST['order'])) {
            $orderField=array('id','sn');
            $order_dir = $_REQUEST['order']['0']['dir'];//ase desc 升序或者降序
            if($order_dir=='desc')
                $orm= $orm->order_by_desc($orderField[$_REQUEST['order']['0']['column']]);
            else
                $orm= $orm->order_by_asc($orderField[$_REQUEST['order']['0']['column']]);
        }
        */
 
        $recordsTotal = $orm->count();
 
        //分页
        $orm=$orm->limit(g('length',10))->offset(g('start',0));
        $infos=$orm->find_array();
 
 
 
 
        echo json_encode(array(
            "draw" => intval(g('draw')),
            "recordsTotal" =>intval($recordsTotal),
            "recordsFiltered" => intval($recordsTotal),
            "data" => $infos
        ), JSON_UNESCAPED_UNICODE);



导出:


https://datatables.net/extensions/buttons/examples/flash/simple.html

https://datatables.net/extensions/buttons/examples/html5/simple.html



dom: 'rtlBip',

 buttons: [

                    {

                        'extend': 'excel',

                        'text': '导出EXCEL',//定义导出excel按钮的文字

                        'exportOptions': {

                            'modifier': {

                                'page': 'current'

                            }

                        }

                    }

                  ,{

                        'extend': 'csv',

                        'text': '导出CSV',

                        'exportOptions': {

                            'modifier': {

                                'page': 'current'

                            }

                        }

                    }

                    ,

                {

                    'extend': 'pdf',

                    'text': '导出PDF',

                    'exportOptions': {

                        'modifier': {

                            'page': 'current'

                        },

                    },

                    'chartset':'utf-8'

                },{

                        text: '导出JSON', //自定义按钮

                        action: function ( e, dt, button, config ) {

                            var data = dt.buttons.exportData();


                            $.fn.dataTable.fileSave(

                                new Blob( [ JSON.stringify( data ) ] ),

                                'Export.json'

                            );

                        }

                    },

                    {

                        'extend': 'copy',

                        'text': '复制 ',


                    },

                    {

                        'extend': 'print',

                        'text': '打印 ',

                    },



                ],



PDF中文乱码解决

http://www.yuyanping.com/datatables-export-csv-pdf-be-garbled/



分布加上跳转到指定页：

 'fnDrawCallback': function(table) {

                      $("#example_paginate").append("<div style='display:inline-block;float:right;margin-top:5px;'>  跳转到第 <input type='text' id='changePage' class='input-text' style='width:40px;height:22px'> 页 <a class='btn btn-default shiny btn-sm' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>确认</a></div>");

                      var oTable = $("#example").DataTable();

                      $("#changePage").val(oTable.page()+1);

                      $('#dataTable-btn').click(function(e) {

                          if($("#changePage").val() && $("#changePage").val() > 0) {

                              var redirectpage = $("#changePage").val() - 1;

                          } else {

                              var redirectpage = 0;

                          }

                          oTable.page(redirectpage).draw( 'page' );


                      });

                  }





自行封装AJAX上传及返回数据：

  ajax: function (data, callback, settings) {


            $.ajax({

                "type": "GET",

                "url": "/Flow/List",

            "cache": false, //禁用缓存

            "data": data,//param, //传入组装的参数

            "dataType": "json",

            "success": function (result) {

            console.log(result);

                /*

            var returnData = {};

            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回   " +

            returnData.recordsTotal = result.total;//返回数据全部记录   " +

            returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果   "

            returnData.data = result.data;//返回的数据列表   //console.log(returnData);   " +

          //  "//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染   "

          //  "//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕

          */

                     callback(result);

            }  });  },


上一篇：爱宝加密狗USB描述符
下一篇：传输协议