Move Datatables Filter and Other Options to other Positions

Question

I want to position the filter bar and other elements from my datatables table to a complete other part of my page. In particular, I'd like to move the search filter bar to the section titled 'filters' - and in the process, learn how to move any of these elements. However, I can't seem to figure out how to do it and have only had luck moving them to the top and bottom of the table. I've tried with getElementById but had no luck.

This is a simple example code, but please note that I am using a Flask app which draws data in via python and the actual datatable itself is a bit more complicated.

HTML

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Datatables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<div class="filters">
  I have a bunch of filters sitting on the left here and want to move some parts from the datatable here.
</div>
<div class="main">
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
            </tr>
          </tbody>
  </table>
  </div>
          <script>
            $(document).ready(function () {
    $('#example').DataTable();
});
          </script>

CSS

.filters {
    position: fixed;
    width: 34%;
    height: 100%;
    overflow: hidden;
    background-color:lightgray;
}

.main {
    position: absolute;
    width: 66%;
    height: 100%;
    left: 34%;
    top: 10%;
    padding-left:10px;
    padding-top:20px;
}

Desired Result

Focusing on the core of your queston: To place the search field wherever you want, you can create your own input field for this. See [Search Box outside datatable](https://stackoverflow.com/a/5990528/12567365) - but also bear in mind that you will need to hide the default search input field using the DataTables [`dom`](https://datatables.net/reference/option/dom) option - so, something like `dom: 'lrtip'` - where the `f` option for "filtering" has been removed. The `dom` option gives you the ability to move and style the other controls also - to a limited degree, depending on what you need. — andrewJames, Jul 03 '22 at 13:14

score 1 · Accepted Answer · answered Jul 05 '22 at 02:40

I figured out a solution.

You can add an input into the HTML, then call that input and use the following,

$('#searchInput').keyup(function () {
            oTable.search($(this).val()).draw();
        });

Full solution:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<div class="filters">


    <!-- SOLUTION PART 1 -->
    <form class="form">
        <div>
            <input type="text" id="searchInput" class="form-control" placeholder="&#xf002;&nbsp;&nbsp;Search">
        </div>
    </form>


</div>
<div class="main">
    <table id="example" class="example" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
            </tr>
        </tbody>
    </table>
</div>


<script>
    // SOLUTION PART 2
    $(document).ready(function () {
        var oTable = $('#example').DataTable({
            "pagingType": "simple",
            "ordering": "false",
            "dom": '<<t>ip>'
        });
        $('#searchInput').keyup(function () {
            oTable.search($(this).val()).draw();
        });

    });
</script>

CSS

.filters {
    position: fixed;
    width: 34%;
    height: 100%;
    overflow: hidden;
    background-color:lightgray;
}

.main {
    position: absolute;
    width: 66%;
    height: 100%;
    left: 34%;
    top: 10%;
    padding-left:10px;
    padding-top:20px;
}

Move Datatables Filter and Other Options to other Positions

1 Answers1