Bootstrap 4 table disable paging?

sunny_s

Hi, I am using Bootstrap 4 styling, I like to keep the ordering feature and the search feature, but would like to know is there any way to have a full table of data instead of paging?

I tried this function but doesn't work
$('#cus-table').DataTable({
"paging": false,
"info": false
});

kthorngren

The pageLength option set to -1 should do what you are asking. Here is an example:
http://live.datatables.net/mimovudo/1/edit

You may also want to use "paging": false,.

Kevin

sunny_s

Hey Kevin,

"paging": false does remove the paging, but the "Showing 1 to 1 of 1 entries" isn't updating?

sunny_s

And is there any way to move the search bar from right to left?

kthorngren

but the "Showing 1 to 1 of 1 entries" isn't updating

I'm guessing you are adding data to the table after Datatables initializes?

If so how are you adding the data?

is there any way to move the search bar from right to left?

The dom option is used to control the placement of the Datatables features. There is an example with Bootstrap integration. I haven't tried myself so don't know the exact config with Bootstrap.

Kevin

sunny_s

Hi Keivn,

Right now it's hard code. I added one more tbody in the html file. It was

    <table class="table table-bordered table-hover" id="cus-table">
      <thead class="customer-table">
        <tr>
          <th>Customer</th>
          <th>Site</th>
          <th>Order</th>
          <th>Route</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="#">Adobe SJ</a></td>
          <td><a href="#">Adobe SJ (345 Park Ave; San Jose)</a></td>
          <td><a href="#">Order</a></td>
          <td>
            <select class="select-driver form-control" name="driver">
              <option value="none" selected="selected">Choose Your Driver</option>
              <option value="d1">D1</option>
              <option value="d2">D2</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>

And then it was

    <table class="table table-bordered table-hover" id="cus-table">
      <thead class="customer-table">
        <tr>
          <th>Customer</th>
          <th>Site</th>
          <th>Order</th>
          <th>Route</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="#">Adobe SJ</a></td>
          <td><a href="#">Adobe SJ (345 Park Ave; San Jose)</a></td>
          <td><a href="#">Order</a></td>
          <td>
            <select class="select-driver form-control" name="driver">
              <option value="none" selected="selected">Choose Your Driver</option>
              <option value="d1">D1</option>
              <option value="d2">D2</option>
            </select>
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td><a href="#">Cool</a></td>
          <td><a href="#">San Jose)</a></td>
          <td><a href="#">Order</a></td>
          <td>
            <select class="select-driver form-control" name="driver">
              <option value="none" selected="selected">Choose Your Driver</option>
              <option value="d1">D1</option>
              <option value="d2">D2</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>

Later on all data will come from backend instead of hard code.

The js file is an external js file, I have

$(function () {
     $('#cus-table').DataTable({
      "paging":   false,
      "pageLength": 1
    });
}

sunny_s

Oh, so I realize I shouldn't add tbody after tbody, but another tr. I made that change and the Showing 1 to 1 of 1 entries updates

allan

Just to confirm - its all working as expected now?

sunny_s

Hi, Allan,
Yes, thank you for helping.