如何在工具栏数据表中配置自定义按钮(添加)

时间:2017-05-20 09:03:14

标签: button datatables customization dispose

我正在尝试在我的数据表的工具栏中添加一个对齐到左侧的按钮。 在rigth方面,我有5个按钮用于导出。 我是Datatables的新手,我不是javascript的专业知识,所以如果有人可以帮助我,我就是apreciate。

$(document).ready(function () {
    var table = $('#TableId').DataTable(
{
    columnDefs: [
        { "width": "5%", "targets": [0] },
        { "className": "text-left custom-middle-align", "targets": [0, 1, 2, 3, 4, 5, 6, 7] }
    ],
    dom: '<"html5buttons"B>lTfgitp',
    buttons: [

        {extend: 'copy'},
        {extend: 'csv'},
        {extend: 'excel', title: 'ExampleFile'},
        {extend: 'pdf', title: 'ExampleFile'},

        {extend: 'print',
            customize: function (win){
                $(win.document.body).addClass('white-bg');
                $(win.document.body).css('font-size', '10px');
                $(win.document.body).find('table')
                        .addClass('compact')
                        .css('font-size', 'inherit');
            }
        }
    ],
    processing: true,
    serverSide: true,
    ajax:
        {
            url: "/Plugin/GetData",
            type: "POST",
            dataType: "JSON"

        },
    rowId: "Sr",
    columns: [
                {
                "className": 'details-control sorting_disabled',
                "orderable": false,
                "data": null,
                "defaultContent": ''
                },
                { "data": "Sr" },
                { "data": "OrderTrackNumber" },
                { "data": "Quantity" },
                { "data": "ProductName" },
                { "data": "SpecialOffer" },
                { "data": "UnitPrice" },
                { "data": "UnitPriceDiscount" }
    ],
    order: [[1, "asc"]]
});

我有这个 enter image description here

我想要这个 enter image description here

提前感谢。

最好的问候。

Jolynice

0 个答案:

没有答案