Disable Paging but keep Sorting as is?

moktik · August 2016

Hi,

In the table I've created, sorting and pagination are there by default. But when I disable paging as
"paging": false
Sorting also goes off. Why is that so?
I don't want paging but I want full sorting here. I tried bSort also.
Also, sorting of a single column doesn't work for me. I tried
"order": [[ 2, "asc" ]]
but that too didn't work! Where am I going wrong?

I've imported these js & css:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
  <link href="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" />
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>

Tom (DataTables) · August 2016

Could you post the code for the table you are initialising?

I can take a look for you.

Thanks

Tom

moktik · August 2016

Here you go!

<html>
<head>
<!-- [Start] Adding CSS -->
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
  <link href="css/jquery.dataTables.min.css" rel="stylesheet"/>
  <link href="css/dataTables.bootstrap.css" rel="stylesheet" />
<!-- [End] Adding CSS -->

<!-- [Start] Adding JS at the end to speed up page loading -->
<script src="js/jquery-latest.js"></script>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>-->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.dataTables.min.js"></script>
  <script src="js/dataTables.bootstrap.js"></script>
  <script>  
    $(document).ready(function() {
    $('#ping').dataTable( {
    "searching": false  // Disable Search Field
    "iDisplayLength": 50
    } );
    });
    </script>
<!-- [End] Adding JS at the end to speed up page loading -->
</head>
<body>

<div>
<!-- [Start] Tabs -->
<div class="container" style="max-width: 798;">
  
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">1</a></li>
    <li><a data-toggle="tab" href="#menu1">2</a></li>
    <li><a data-toggle="tab" href="#menu2">3</a></li>
    <li><a data-toggle="tab" href="#menu3">4</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>1</h3>
      <table id = "ping" class="table table-hover table-striped table-bordered" style="font-size: 12px;">
        <thead> <!--data-spy="affix"-->
            <tr>
                <th>Name</th>
                <th>Place</th>
                <th>Animal</th>
                <th>Thing</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>ABC</th>
                <th>Dallas</th>
                <th>0000</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>DEF</th>
                <th>New York</th>
                <th>1111</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>HIJ</th>
                <th>Tokyo</th>
                <th>3333</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>KLM</th>
                <th>Oslo</th>
                <th>4444</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
        </tbody>
    </table>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>2</h3>
            <table id = "ping" class="table table-hover table-striped table-bordered" style="font-size: 12px;">
        <thead> <!--data-spy="affix"-->
            <tr>
                <th>Name</th>
                <th>Place</th>
                <th>Animal</th>
                <th>Thing</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>ABC</th>
                <th>Dallas</th>
                <th>0000</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>DEF</th>
                <th>New York</th>
                <th>1111</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>HIJ</th>
                <th>Tokyo</th>
                <th>3333</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>KLM</th>
                <th>Oslo</th>
                <th>4444</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
        </tbody>
        </table>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>3</h3>
      <table id = "ping" class="table table-hover table-striped table-bordered" style="font-size: 12px;">
        <thead> <!--data-spy="affix"-->
            <tr>
                <th>Name</th>
                <th>Place</th>
                <th>Animal</th>
                <th>Thing</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>ABC</th>
                <th>Dallas</th>
                <th>0000</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>DEF</th>
                <th>New York</th>
                <th>1111</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>HIJ</th>
                <th>Tokyo</th>
                <th>3333</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>KLM</th>
                <th>Oslo</th>
                <th>4444</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
        </tbody>
        </table>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>4</h3>
                  <table id = "ping" class="table table-hover table-striped table-bordered" style="font-size: 12px;">
        <thead> <!--data-spy="affix"-->
            <tr>
                <th>Name</th>
                <th>Place</th>
                <th>Animal</th>
                <th>Thing</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>ABC</th>
                <th>Dallas</th>
                <th>0000</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>DEF</th>
                <th>New York</th>
                <th>1111</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>HIJ</th>
                <th>Tokyo</th>
                <th>3333</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
            <tr>
                <th>KLM</th>
                <th>Oslo</th>
                <th>4444</th>
                <th>xxx.xxx.xxx.xxx</th>
            </tr>
        </tbody>
        </table>
    </div>
  </div>
</div>
<!-- [End] Tabs -->
        </div>
        </body>
        </html>

Disable Paging but keep Sorting as is?

Disable Paging but keep Sorting as is?

Answers

Howdy, Stranger!

Categories

DataTables

Disable Paging but keep Sorting as is?

Disable Paging but keep Sorting as is?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables