datatables插件的使用记录——顶部按钮及传值

上一次记录了行内按钮的使用方法。这一篇用来记录顶部按钮的用法。

先来效果图

下边贴代码
非重点部分就不说明了。

<script>
        var td = $('#table_id_example');
        $(document).ready(function () {
            td.dataTable({
                dom: "Bfrtipl",
                ajax: {
                    type: "GET",
                    url: "{% url 'get_agent_list' %}",
                    data: ""
                },
                columnDefs: [
                    {
                        "defaultContent": "",
                        "targets": "_all"
                    }
                ],

                columns: [
                    {data: "agent_id"},
                    {data: "username"},
                    {data: "name"},
                    {data: "mobile"},
                    {data: "wallet"},
                    {data: "wallet_state"},
                    {data: "active_time"}
                ],
                order: [
                    [1, 'asc'],
                ],
                ordering: true,
                serverSide: false,
                select: true,
                paging: true,
                lengthChange: true,
                pageLength: 15,
                lengthMenu: [ //自定义分页长度
                    [15, 30, 50],
                    ['15', '30', '50']
                ],
                // 重点部分
                buttons: [
                    {
                    	// 这里继承了按钮的基本功能，选中行才能用
                        extend: "selected",
                        text: "修改信息",
                        // 按钮的class
                        className: 'btn btn-info',
                        action: function (e, dt, button, config) {
                            var rows_data = [];
                            // 遍历选中的行，获取所有行内数据
                            dt.rows({selected: true}).every(function () {
                                rows_data.push(this.data())
                            });
                            console.log(rows_data);
                            // 这个按钮的功能是跳转，采用拼接url的方式
                            window.location.href = "{% url 'agent_change' %}" +"?agent_id=" +rows_data[0].agent_id;
                        }
                    },
                    {
                        extend: "selected",
                        text: "冻结钱包",
                        className: 'btn btn-warning',
                        action: function (e, dt, button, config) {
                            if (confirm("确定要冻结吗？\n请确认！") == true) {
                                var rows_data = [];
                                // 遍历选中的行，获取所有行内数据
                                dt.rows({selected: true}).every(function () {
                                    rows_data.push(this.data())
                                });
                                console.log(rows_data);
                                console.log(rows_data[0].agent_id);
                                // 这个按钮的作用是ajax发送数据
                                $.ajax({
                                    url: '{% url 'freeze_wallet' %}',
                                    type: 'POST',
                                    dataType: 'json',
                                    data: {
                                        'action': 'freeze',
                                        'agent_id': rows_data[0].agent_id,
                                        // 这是django框架的防伪方式
                                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                                    },
                                    success: function (data) {
                                        console.log(data);
                                        if (data.code != 1) {
                                            alert(data.message)
                                        }
                                        // 发送成功后，dt表重新加载数据（刷新）
                                        dt.ajax.reload();
                                    }
                                })
                            }
                        }
                    },
                    {	// 这个按钮跟前面是一样的，省略
                        extend: "selected",
                        text: "解冻钱包",    
                    }
                ],
                language: {
                    "processing": "玩命加载中...",
                    }
                },

            });
        });
    </script>

关于buttons 的中文网说明：http://datatables.club/reference/button/