Jquert DataTable使用(excel导出)

1.在head中引入

<link href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"
  rel="stylesheet"/>
<link type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"  src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript"  src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>

2.在script中写

//配置

 var CONSTANT = {
        DATA_TABLES : {
            DEFAULT_OPTION : { //DataTables初始化选项
                "sProcessing": "处理中...",
                dom: 'flBrtip',
                "buttons": [
                    {
                        'extend': 'excel',
                        'text': '导出',//定义导出excel按钮的文字

                    }
                ],
                "displayLength":15,  //显示每页显示多少条数据
                language: {
                    "sProcessing":   "处理中...",
                    "sLengthMenu":   "每页 _MENU_ 项",
                    "sZeroRecords":  "没有匹配结果",
                    "sInfo":         "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
                    "sInfoEmpty":    "当前显示第 0 至 0 项，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix":  "",
                    "sSearch":       "搜索:",
                    "sUrl":          "",
                    "sEmptyTable":     "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands":  ",",
                    "oPaginate": {
                        "sFirst":    "首页",
                        "sPrevious": "上页",
                        "sNext":     "下页",
                        "sLast":     "末页",
                        "sJump":     "跳转"
                    },

                    "oAria": {
                        "sSortAscending":  ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                autoWidth: false,   //禁用自动调整列宽
                stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
                order: [],          //取消默认排序查询,否则复选框一列会出现小箭头
                processing: false,  //隐藏加载提示,自行处理
                serverSide: false,
                searching: false,    //禁用原生搜索
                bLengthChange: false
            },
            COLUMN: {
                CHECKBOX: { //复选框单元格
                    orderable: false,
                    width: "20px",
                    data: null,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" class="iCheck" id = "isCheck" style="width: 30px">';
                    },
                    title: '<input type="checkbox" class="iCheck" id = "isCheck_all" style="width: 30px">'
                }
            },
            RENDER: {   //常用render可以抽取出来，如日期时间、头像等
                ELLIPSIS: function (data, type, row, meta) {
                    data = data||"";
                    return '<span title="' + data + '">' + data + '</span>';
                }
            },
        }
};

var _table = $("#latelist").dataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION,{searching: true}, {
        columns: [
                CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                { "data": "user_id", "title":"学号","defaultContent":""},
                { "data": "name", "title":"姓名","defaultContent":""},
                { "data": "nationality", "title":"民族","defaultContent":""},
                { "data": "department", "title":"学院","defaultContent":""},
                { "data": "major", "title":"专业","defaultContent":""},
                { "data": "class_", "title":"班级","defaultContent":""},
                { "data": "campus", "title":"校区","defaultContent":""},
        ]
    },{
        data:{{data|tojson}}
    })).api();