Friday, 31 March 2017

datatables with 6 buttons show, visibility , PDF, EXCEL, PRINT, PageLength, CSV, COPY

datatables with 6 buttons show, visibility , PDF, EXCEL, PRINT, PageLength, CSV, COPY:


Jquery
-----------


<div dir="ltr" style="text-align: left;" trbidi="on">
var dt_reports_table_lists = $('#dt_reports_table_lists').DataTable({
       dom: 'Bfrtip',
       lengthMenu: [
           [ 10, 25, 50, 100, 500 ],
           [ '10 rows', '25 rows', '50 rows', '100 rows', '500 rows' ]
       ],
        ajax: {
            url: '/ajx/users.json',
            dataSrc: 'data',
            "data": function (d) {
                d.fromdate = $('#fromdate').val();
                d.todate = $('#todate').val();
            }
        },
        "processing": true,
        "serverSide": true,
        "dom": 'Bfrtip',
        "buttons": [
            'colvis','pageLength','copy', 'csv', 'excel',
            {
                extend: 'pdfHtml5',
                customize: function (doc) {
                    doc.styles.tableHeader = {
                        color: '#000000',
                        fontSize: '11',
                        alignment: 'center',
                        fontweight: 'bold',
                    }
                    doc.styles.tableBodyOdd = {
                        background: 'white',
                        alignment: 'center',
                    }
                    doc.styles.tableBodyEven = {
                        background: 'white',
                        alignment: 'center',
                    }
                    doc.defaultStyle.fontSize = 9;
                    doc.content[1].table.widths =
                            Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                    doc.content.splice(0, 0, {
                        margin: [0, 0, 0, 12],
                        alignment: 'center',
                        fit: [100, 190],
                        image: 'data:image/png;base64,iVBORw'

                    });
                },
                text: 'Pdf',
                exportOptions: {
                    modifier: {
                        columns: [ 0, 1, 2, 3 ],
                    }
                },
                header: true,
                title: 'Registered Users - Outlets',
            },
            {
                extend: 'print',
                text: 'Print',
                exportOptions: {
                    columns: ':visible',
                },
                customize: function (win) {
                    $(win.document.body).prepend('<img src="" style="display: block; float: none; height: 50px; margin: 0 auto; padding-top: 20px; width: 150px;" />');
                    $(win.document.body).find('table').addClass('display').css('font-size', '9px').css('padding-left', '20px').css('padding-right', '20px');
                    $(win.document.body).find('h1').html('Registered Users - Outlets').css('text-align', 'center').css('font-size', '20px');
                    $(win.document.body).find('th').css('text-align', 'center').css('font-size', '12px');
                    $(win.document.body).find('td').css('text-align', 'center').css('font-size', '10px');
                }
            }
        ],
        "columnDefs": [ {
            targets: -1,
            visible: false
        } ],
        "columns": [
            {"data": "tmpid", "name": "tmpid"},
            {"data": "firstname", "name": "firstname"},
            {"data": "email", "name": "email"},
            {"data": "mobile", "name": "mobile"},
            {"data": function (data) {
                    if (data['created'] !== null) {
                        var d = new Date(data['created']);
                        var rd = d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear();
                        return rd;
                    } else {
                        return data['created'];
                    }
                },
                "name": "created"
            }
        ],
    });
    // Apply Search
    dt_reports_table_lists.columns().every(function () {
        var that = this;

        $('input,select', this.footer()).on('keyup change focusout', function () {

            if ($('#todate').val() || $('#fromdate').val()) {

                if ($('#todate').val() &amp;&amp; $('#fromdate').val()) {
                    if (that.search() !== this.value) {
                        that
                                .search(this.value)
                                .draw();
                    }
                } else {
                    $('#todate').css('color', 'red');
                    $('#fromdate').css('color', 'red');
                    $('#todate').val() ? $('#fromdate').focus() : $('#todate').focus();
                }

            } else {
                if (that.search() !== this.value) {
                    that
                            .search(this.value)
                            .draw();
                }
            }


        });
    });</div>

1 comment: