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

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

John DowJohn Dow Posts: 16Questions: 6Answers: 0
edited October 2023 in Free community support

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 19,891Questions: 26Answers: 4,691
    Answer ✓

    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 DowJohn Dow Posts: 16Questions: 6Answers: 0

    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!

Sign In or Register to comment.