How to display "Showing 1 to 10 of X entries" on top of the table

Question

How to display "Showing 1 to 10 of X entries" on top of the table?

My code is below:

$(document).ready(function () {
    var oTable = $('#GridView1').prepend($('<thead></thead>').append($('#GridView1').find("tr:first"))).DataTable({
        "columnDefs": [
                 { "targets": [0, 1, 3,4], "searchable": false }
        ],
        "oLanguage": {
            "sSearch": "Search by Category: "
        }

    });

});

Answer 1

SOLUTION

Use dom option to define the table control elements to appear on the page and in what order.

var oTable = $('#GridView1')
   .prepend(
      $('<thead></thead>')
         .append(
            $('#GridView1').find("tr:first")
         )
      )
    .DataTable({
       "columnDefs": [
          { "targets": [0, 1, 3,4], "searchable": false }
       ],
       "oLanguage": {
           "sSearch": "Search by Category: "
       },
       "dom": "lifrtp"
    });

Also add the following CSS rule to adjust appearance of the informational control.

.dataTables_wrapper .dataTables_info {
    clear:none;
    margin-left:10px;
    padding-top:0;
}

DEMO

See this jsFiddle for code and demonstration.