SOURCE

console 命令行工具 X clear

                    
>
console
  var language = {
        "sProcessing": "加载中...",
        "sLengthMenu": "每页显示 _MENU_ 条结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 条记录,共 _TOTAL_ 条记录",
        "sInfoEmpty": "显示第 0 至 0 条记录,共 0 条记录",
        // "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoFiltered": "",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        },
        "select": {
            "rows": {
                "_": "选择 %d 行",
            }
        }
    };

    $(document).ready(function () {


        var table = $('#example').DataTable({
            language: language,
            // 显示条数切换下拉  默认 true
            lengthChange: true,
            lengthMenu:  [10 ,20, 50, 100],
            //分页是否开启,默认 true
            paging: true,
            // Y轴滚动条
            scrollY: 300,
            // X轴滚动条
            scrollX: '100%',
            // 开启服务器模式 默认false
            serverSide: true,
            // 开启搜索框 默认true
            searching: false,
            // 开启排序  默认true
            ordering: true,
            // 默认排序的列
            order: [[ 1, "desc" ]],
            // 开启加载提示 默认false
            processing: true,
            // ajax请求地址
            ajax: function (data, callback, setting) {

                console.log('原始参数:',data);
                //封装请求参数
                var param = {};
                param.draw = data.draw;
                param.pageSize = data.length;   //页面显示记录条数,在页面显示每页显示多少项的时候
                param.start = data.start;       //开始的记录序号
                param.page = (data.start / data.length) + 1;
                param.name = $('#name').val();
                param.tel = $('#tel').val();

                console.log('发送参数:',data);

                $.ajax({
                    url: 'https://www.easy-mock.com/mock/5ce6627514d12512bdbf8891/userList',
                    type: 'GET',
                    //禁用缓存
                    cache: false,
                    data: param,
                    dataType: 'json',
                    success: function (res) {
                        // 对返回的数据进行处理
                        if (res.status === 1) {
                            let data = {
                                //必选,Datatables发送的draw是多少那么服务器就返回多少
                                draw: res.result.draw,
                                //必选,即没有过滤的记录数
                                recordsTotal: res.result.recordsTotal,
                                //必选,过滤后的记录数
                                recordsFiltered: res.result.recordsFiltered,
                                //必选,表中中需要显示的数据
                                data: res.result.data
                            };
                            callback(data);
                        } else if (res.status === 0) {
                            alert('接口返回异常');
                        } else {
                            alert('状态码错误');
                        }
                    },
                    error: function (error) {
                        throw error;
                    }
                });
            },
            // 列数据
            columns: [
                {
                    name: '选择',
                    width: 100,
                    orderable : false
                },
                {
                    name: 'ID',
                    data: "id",
                    sClass: "text-center",
                    width: 100,
                },
                {
                    name: '创建日期',
                    data: "createDate",
                    sClass: "text-center",
                    width: 300,
                },
                {
                    name: '姓名',
                    data: "name",
                    sClass: "text-center",
                    width: 100,
                },
                {
                    name: '手机',
                    data: "mobile",
                    sClass: "text-center",
                    width: 250,
                },
                {
                    name: '状态',
                    data: "status",
                    sClass: "text-center",
                    width: 100,
                    orderable : false
                },
                {
                    name: '操作',
                    sClass: "text-center",
                    width: 200,
                    orderable : false
                },
            ],
            columnDefs: [
                // 在第一列添加选择框
                {
                    targets: 0,
                    className: 'select-checkbox',
                    render: function () {
                        return null
                    }
                },
                {
                    targets: 1,
                    render: function (data) {
                        return ++data
                    },
                },
                {
                    targets: -2,
                    render: function (data, type) {
                        return data ? '正常' : '禁用'
                    },
                },
                // 自定义最后一列的内容
                {
                    targets: -1,
                    render: function (data, type) {
                        return '<span class="btn btn-primary btn-xs">查看</span>'
                    },
                }
            ],
            // checkbox选项
            select: {
                //多选模式
                style: 'multi',
                // 点击选择器
                selector: 'tr',
                // 禁用选择信息的显示
                info: false,
            },
            // 固定列选项
            fixedColumns: {
                leftColumns: 1,

                rightColumns: 2,
            }
        });

        // 获取行数据
        $('#example tbody').on('click', '.btn', function (event) {
            event.stopPropagation();
            var data = table.row($(this).parents('tr')).data();
            console.log(data);
            alert(JSON.stringify(data));
        });

        // 点击查询
        $('#search').on('click', function (event) {
            event.preventDefault();
            // 按照参数重载table
            table.ajax.reload();
            // 返回第一页
            // table.page(1).draw(true);
        });

        // 选择全部
        $('#selectAll').on('click', function () {
            table.rows().select();
        });
        // 取消全部
        $('#deSelectAll').on('click', function () {
            table.rows().deselect();
        });
        // 获取选择的信息
        $('#getAll').on('click', function () {
            var datas = table.rows('.selected').data(),
                arr = [];
            [].forEach.call(datas, function(item) {
                arr.push(item);
            });

            console.log(arr);
            alert(JSON.stringify(arr));
        });
    });
<div class="container">
    <hr>
    <form class="form-inline">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" class="form-control input-sm" id="name" name="name" placeholder="姓名">
        </div>

        <div class="form-group">
            <label for="tel">电话:</label>
            <input type="text" class="form-control input-sm" id="tel" name="tel" placeholder="电话">
        </div>

        <input class="btn btn-primary btn-sm" id="search" type="submit">
        <input class="btn btn-primary btn-sm" type="reset">

    </form>
    <hr>
    <table id="example" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th class="text-center">选择</th>
            <th>ID</th>
            <th>注册日期</th>
            <th>姓名</th>
            <th>手机号</th>
            <th>用户状态</th>
            <th>自定义操作</th>
        </tr>
        </thead>
    </table>
    <hr>
    <div class="row">
        <button id="selectAll" class="btn btn-primary btn-sm">选择全部</button>
        <button id="deSelectAll" class="btn btn-primary btn-sm">取消全部</button>
        <button id="getAll" class="btn btn-primary btn-sm">获取全部</button>
    </div>
</div>
    div.dataTables_wrapper div.dataTables_info{
        padding: 10px 0;
    }