Changing the output of the first ROW (length and search)

John Dow

I want to change the top ROW, where search and length are in three parts, leave the length on the left, place search in the middle and on the right under the buttons copy, print, excel, pdf. Left 1/4, middle 1/2 and right 1/4. The Search field should be the entire length of the div. Is this even possible?
This is original render with two parts:

<div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="dataTables_length" id="usrData_length">
      <label
        >Show
        <select name="usrData_length" aria-controls="usrData" class="form-select form-select-sm">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="-1">All</option>
        </select>
        items</label
      >
    </div>
  </div>
  <div class="col-sm-12 col-md-6">
    <div id="usrData_filter" class="dataTables_filter">
      <label>Search:<input type="search" class="form-control form-control-sm" placeholder="Search string" aria-controls="usrData" /></label>
    </div>
  </div>
</div>

I want to do this (three unequal parts):

<div class="row">
  <div class="col-sm"> **// left part**
    <div class="dataTables_length" id="usrData_length">
      <label
        >Show
        <select name="usrData_length" aria-controls="usrData" class="form-select form-select-sm">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="-1">All</option>
        </select>
        items</label
      >
    </div>
  </div>
  <div class="col-sm col-md-6"> **// middle large part**
    <div id="usrData_filter" class="dataTables_filter">
      <label>Search:<input type="search" class="form-control form-control-sm" placeholder="Search string" aria-controls="usrData" /></label>
    </div>

    <div class="col-sm"> **// right part**
       ...........
    </div>
  </div>
</div>

I tried to create this structure in Chrome by dragging divs, but then everything stops working, both length and search

kthorngren

The dom option is used for placing the elements. Looks like you are using Bootstrap - take a look at the default Bootstrap dom example. If I understand your requirements, maybe something like this:

"<'row'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-6'f><'col-sm-12 col-md-3'B>>" +

Inspect the search input to find the selector used and override the styling to set the width the way you want.

Kevin

kthorngren

I had a few minutes so put this example together:
https://live.datatables.net/hawubena/1/edit

You can change it as appropriate for your needs.

Kevin

John Dow

Kevin, you are a wizard )). Thank you for showing me how to do it and doing what I wanted. With your help, I practically figured out how it works and here you made a ready-made solution. This is very valuable to me!