locked
How to move Print Buttons above Search bar of JQuery DataTables RRS feed

  • 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