How to move Print Buttons above Search bar of JQuery DataTables [Answered]RSS

2 replies

Last post Apr 18, 2019 10:56 AM by eaak79

‹ Previous Thread|Next Thread ›

Shortcuts

eaak79

Member

576 Points

361 Posts

How to move Print Buttons above Search bar of JQuery DataTables

Apr 17, 2019 08:37 PM|eaak79|LINK

Hi there,

I am using JQuery DataTables on my DataList page in ASP.NET MVC 5. I add print buttons to it. I couldn't figure out, how to move the "print buttons" above the search box?

Screen shot and code is below. Can somebody help me how to fix this problems.

Javascript/Jquery:

$(document).ready(function () {
    $('#jdTable').dataTable({
        dom: 'lBfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                text: '<i class="fas fa-copy"></i> Copy',
                titleAttr: 'Copy'
            },
            {
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel"></i> Excel',
                titleAttr: 'Excel'
            },
            {
                extend: 'csvHtml5',
                text: '<i class="fas fa-file-csv"></i> CSV',
                titleAttr: 'CSV'
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf"></i> PDF',
                titleAttr: 'PDF'
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i> Print',
                titleAttr: 'Print'
            }
 
        ]
    });
});

Thanks in advance.

Always be ready to help, share, think, Analyse and Accept the truth.

Jenifer Jian...

Contributor

2100 Points

705 Posts

Re: How to move Print Buttons above Search bar of JQuery DataTables

Apr 18, 2019 03:12 AM|Jenifer Jiang|LINK

Hi eaak79,

According to your description, I suggest that you could create a div and append the buttons to it.

About customizing position of the buttons, you could refer to: https://datatables.net/extensions/buttons/

Here is my sample.

    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script>
        $(document).ready(function () {
            var table = $('#example').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel','csv','pdf','print'
                ]
            });
            table.buttons().container().appendTo($('#test'));
        });
    </script>

<body>
    <div id="test" style="float:right">

    </div>
    <table id="example" class="display" style="width: 100%">
        <thead>
           <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Office</th>
              <th>Age</th>
              <th>Start date</th>
              <th>Salary</th>
            </tr>
         </thead>
         <tbody>
         ...data...
         </tbody>
    </table>
</body>

result:

Best Regards,

Jenifer

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

eaak79

Member

576 Points

361 Posts

Re: How to move Print Buttons above Search bar of JQuery DataTables

Apr 18, 2019 10:56 AM|eaak79|LINK

Thanks alot Jenifer, I have solved the problem using your suggestion. The modified code is below for future reference.

Note: Yellow highlighted text is the modified code.

Screen shot:

View:

@model List<StudentLMS.Models.Employee.EmployeeModel>
@{
    ViewBag.Title = "Employees List Screen";
}

<br/>
<div class="panel panel-info">
    <div class="panel-heading">
        <h2 class="panel-title">Employees List</h2>
    </div>
    <div class="panel-body">
        <a href='@Url.Action("EmployeeInfo", "Employee")' class = "btn btn-success">Add New  <i class="fas fa-plus"></i></a>
        <div id="printbar" style="float:right"></div>
        <br /> <br/>

        <table id="jdTable" class="table table-condensed table-striped table-hover">
            <thead>
                <tr>
                    <th>Employee ID</th>
                    <th>Employee Name</th>
                    <th>Gender</th>
                    <th>CNIC</th>
                    <th>Mobile</th>
                    <th>Email </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var s in Model)
                {
                    <tr>
                        <td>@s.EmployeeID</td>
                        <td>@s.EmployeeName</td>
                        <td>@s.Gender</td>
                        <td>@s.CNIC</td>
                        <td>@s.Mobile</td>
                        <td>@s.Email</td>
                        <td>
                            <a href='@Url.Action("Edit","Employee",new { id = @s.EmployeeID })'><i class="fas fa-pen-square fa-2x"></i></a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

JavaScript/Jquery:

$(document).ready(function () {
    var table = $('#jdTable').DataTable({
        dom: 'lBfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                text: '<i class="fas fa-copy"></i> Copy',
                titleAttr: 'Copy'
            },
            {
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel"></i> Excel',
                titleAttr: 'Excel'
            },
            {
                extend: 'csvHtml5',
                text: '<i class="fas fa-file-csv"></i> CSV',
                titleAttr: 'CSV'
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf"></i> PDF',
                titleAttr: 'PDF'
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print"></i> Print',
                titleAttr: 'Print'
            }

        ]
    });

    table.buttons().container().appendTo($('#printbar'));

});

thanks again.

Always be ready to help, share, think, Analyse and Accept the truth.

‹ Previous Thread|Next Thread ›