locked
Datatables DOM positioning RRS feed

  • Question

  • User-1664485818 posted

    Hi everyone, I'm using datatable to display information.

    I'm trying to display the DOM information i.e. "Showing 1 to 4 of 4 entries (filtered from 801 total entries)"  at the top of the page away from the table.

    So far I have this 

                <div id="refresh">
                
                </div>
    $('#example').dataTable({
    
            "sDom": '<"top"i>rt<"bottom"<"#refresh">flp><"clear">'
    
          });

    This displays the DOM at the top of the table and moves the search function to the bottom of the table, not what I was looking to do!

    Basically I want everything to stay the same with the additional DOM displayed within the <div id="refresh"> 

    Any pointers much appreciated :)  

    Sunday, August 18, 2019 9:40 PM

Answers

  • User-719153870 posted

    Hi brucey,

    Please notice the following options are allowed: 

    'l' - Length changing  
    'f' - Filtering input  
    't' - The table!  
    'i' - Information  
    'p' - Pagination  
    'r' - pRocessing  

    You can refer to below demo and modify yours:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <style>
            .refresh {
                height:50px;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('#example').DataTable({
                    "sDom":'<"refresh"i<"clear">>rt<"top"lf<"clear">>rt<"bottom"p<"clear">>',
                    "lengthMenu": [4,10,25,50,100],
                    'iDisplayLength': 10 //10 records are initially displayed per page
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <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>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                </tr>
                //...
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
            </div>
        </form>
    </body>
    </html>

    Here's the result of this demo:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 19, 2019 9:43 AM