如何使用排序和自定义按钮创建数据表以进行添加？

Question

我想创建一个具有搜索、排序功能但没有的数据表。记录选择下拉。我试过下面的代码：

$('#example3').dataTable( {

    "aoColumnDefs": [
        { "bSortable": true, "aTargets": [ 0] }
    ],

    "oLanguage": {
        "sLengthMenu": "_MENU_ ",
        "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
    },

    "fnDrawCallback": function ( oSettings ) {
        if ( oSettings.bSorted || oSettings.bFiltered )
        {
            for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
            {
                $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
            }
        }
    },

    "iDisplayLength": 25
});

我无法获得 25、50、100 条记录之类的下拉列表。另外，我想在顶部添加一个新按钮以添加新行。

Answer 1

如此处所述https://datatables.net/examples/api/add_row.html

$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5'
    ] ).draw();

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();

});

Answer 2

我已经找到了我正在寻找的解决方案。这是它的代码，这可能对其他人有帮助。

$('#example3').dataTable({
         "sDom": "<'row'<'col-md-6'l <'toolbar'>><'col-md-6'f>r>t<'row'<'col-md-12'p i>>",
        "oTableTools": {
            "aButtons": [
                    {
                        "sExtends":    "collection",
                        "sButtonText": "<i class='fa fa-cloud-download'></i>",
                        "aButtons":    [ "csv", "xls", "pdf", "copy"]
                    }
            ]
        },
        "aoColumnDefs": [
            { "bSortable": true, "aTargets": [ 0] }
        ],
        "aaSorting": true,
        "oLanguage": {
            "sLengthMenu": "_MENU_ ",
            "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries"
        },
        "aLengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
        "iDisplayLength": 25
});

在顶部区域的数据表中添加按钮link

$("div.toolbar").html('<div class="table-tools-actions"><a href="add" class="btn btn-primary" style="margin-left:12px; background:#5aceff;" id="test2"><i class="fa fa-plus"></i> Add </a></div>');

如何使用排序和自定义按钮创建数据表以进行添加？

How to create datatable with sorting and custom button for add?

javascript

jquery

datatables