Remove From My Forums

How to move Print Buttons above Search bar of JQuery DataTables

Question

User-826336654 posted

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.

Wednesday, April 17, 2019 8:37 PM

Answers

User839733648 posted

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

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, April 18, 2019 3:12 AM

User-826336654 posted

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.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, April 18, 2019 10:56 AM

All replies

User839733648 posted

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

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, April 18, 2019 3:12 AM

User-826336654 posted

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.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, April 18, 2019 10:56 AM

Answered by:

How to move Print Buttons above Search bar of JQuery DataTables

Question

Answers

All replies