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">
            "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


  • 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">
        <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>
            .refresh {
            $(document).ready(function () {
                    "lengthMenu": [4,10,25,50,100],
                    'iDisplayLength': 10 //10 records are initially displayed per page
        <form id="form1" runat="server">
                <table id="example" class="display" style="width:100%">
                    <th>Start date</th>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Garrett Winters</td>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <th>Start date</th>

    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