datatable 高级用法

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

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

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();

            });

 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描述符
下一篇：传输协议