locked
Datatables DOM positioning RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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