Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

jQuery DataTables Date Range Styling

Tags:

javascript

jquery

css

datatable

I have a Partial View like so:

<div style="float: right;">
    <div class="col-sm-12 col-md-3">
        <div class="input-group date datetimepicker">
            <input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>

    <span class="col-md-1 fa fa-minus text-center" style="margin-top: 1%;"></span>

    <div class="col-sm-12 col-md-3">
        <div class="input-group date datetimepicker">
            <input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>
</div>





<table id="Test-Table" class="table table-striped">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.randomClass.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Attachment)
            </th>
            <th></th>
        </tr>
    </thead>
    <tfoot id="Table-Tfoot">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.randomClass.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Attachment)
            </th>
            <th></th>
        </tr>
    </tfoot>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.randomClass.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ReportDate)
                </td>

                <td>
                    <a href="@Url.Content(item.Attachment)" target="_blank">@Path.GetFileName(item.Attachment)</a>
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", "tblAttachments", new { id = item.ID }, null) |
                    @Html.ActionLink("Delete", "Delete", "tblAttachments", new { id = item.ID })
                </td>
            </tr>
        }
    </tbody>
</table>

I am using jQuery DataTables to get searching, paging, and sorting. Here is my jQuery.

@section scripts{
    <script>
        $(document).ready(function () {

            // https://datatables.net/examples/api/multi_filter.html

            var total = $("#Table tfoot th").length;

            $("#Table tfoot th").each(function (index) {
                if (index !== total - 1) {
                    var title = $(this).text().trim();
                    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title +'"/>');
                }
            });


            var table = $("#Test-Table").DataTable({
                "bFilter": false // hide searchbox
            });

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change',
                    function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
            });
        });
    </script>
}

As you can see I am hiding the initial search box that comes standard with jQuery datatables.. because I would like to be able to filter by date-range.

I have researched this, but I don't like how the boxes are above the paging dropdownlist.. so on mine.. the search box on the upper right is gone.. and I would like the two input's to take it's place. How can I do this via CSS?

Any help is appreciated.

Here is how it looks now:

enter image description here

like image 745
Grizzly Avatar asked Jul 14 '17 17:07

Grizzly

3 Answers

Try this plunker demo Hope this makes you get your solution

http://plnkr.co/edit/mdeEYoZtnvpfHCdtSxDP?p=preview

$(function() {
  var oTable = $('#datatable').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",

  });




  $("#datepicker_from").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

  $("#datepicker_to").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      maxDateFilter = new Date(date).getTime();
      oTable.fnDraw();
    }
  }).keyup(function() {
    maxDateFilter = new Date(this.value).getTime();
    oTable.fnDraw();
  });

});

// Date range filter
minDateFilter = "";
maxDateFilter = "";

$.fn.dataTableExt.afnFiltering.push(
  function(oSettings, aData, iDataIndex) {
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[0]).getTime();
    }

    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }

    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }

    return true;
  }
);
like image 190
Prasanth Ravi Avatar answered Nov 06 '22 13:11

Prasanth Ravi

This Bootstrap Datepicker can already show a data range, so i'm using it with the option: inpput-daterange which will take care of all the range-related things:

  • the selected date range is clearly displayed with an alternate color
  • clear buttons for the start date and end date are already built-in
  • the input boxes are already aligned and styled as controlgroup

To align the record paging select of the DataTable, i'm moving it inside the Bootstrap column system, so it appears on top of the DataTable:

  • the CSS to align the dropdown is just a matter of some top and left padding
  • the Bootstrap column system can be easily configured for different screen width

Instead of disabling the search box, i would rather simply hide it:

  • you can dynamically show and hide it, to switch between date-range filter and free-text search
  • you can keep the standard search capabilities of the DataTable and use the sample provided in the Documentation as it is

Here is the full example:

var reportFilterRange = [null, null];

$(document).ready(function() {
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var date = Date.parse(data[1]);
      if (reportFilterRange[0] && date < reportFilterRange[0]) return false;
      if (reportFilterRange[1] && date > reportFilterRange[1]) return false;
      return true;
    }
  );

  var table = $("#Test-Table").DataTable({
    columnDefs: [{
      targets: [3],
      "searchable": false
    }, {
      targets: [3],
      "orderable": false
    }]
  });
  $("#Test-Table_filter").css("display", "none");
  $(".dataTables_length").detach().appendTo('#lenContainer');

  $('#report-date-filter').on('changeDate', function(e) {
    var cases = ["Min-Date", "Max-Date"];
    reportFilterRange[cases.indexOf(e.target.id)] = Date.parse(e.date);
    table.draw();
  });

  $("#report-date-filter").datepicker({
    format: 'yyyy/mm/dd',
    clearBtn: true
  });

});
#report-date-filter {
  max-width: 240px !important;
}

.dataTables_length {
  margin-left: 14px;
  margin-top: 5px;
}
<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-type">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>

<body>
  <br>
  <div class="row" id="filterRow">
    <div id="lenContainer" class="col-xs-4">
    </div>
    <div class="col-xs-6">
      <div class="input-daterange input-group" id="report-date-filter">
        <input id="Min-Date" type="text" class="input-sm form-control" placeholder="Start Date" name="Min-Date" />
        <span class="input-group-addon">to</span>
        <input id="Max-Date" type="text" class="input-sm form-control" placeholder="End Date" name="Max-Date" />
      </div>
    </div>
  </div>

  <table id="Test-Table" class="table table-striped">
    <thead>
      <tr>
        <th>
          Class Name
        </th>
        <th>
          Report Date
        </th>
        <th>
          Attachment
        </th>
        <th></th>
      </tr>
    </thead>
    <tfoot id="Table-Tfoot">
      <tr>
        <th>
          Class Name
        </th>
        <th>
          Report Date
        </th>
        <th>
          Attachment
        </th>
        <th></th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>System Architect</td>
        <td>2017/07/25</td>
        <td><a href="javascript:void(0)" target="_blank">Tiger Nixon</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Accountant</td>
        <td>2017/07/24</td>
        <td><a href="javascript:void(0)" target="_blank">Garrett Winters</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Junior Technical Author</td>
        <td>2009/01/12</td>
        <td><a href="javascript:void(0)" target="_blank">Ashton Cox</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Senior Javascript Developer</td>
        <td>2012/03/29</td>
        <td><a href="javascript:void(0)" target="_blank">Cedric Kelly</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Accountant</td>
        <td>2008/11/28</td>
        <td><a href="javascript:void(0)" target="_blank">Airi Satou</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Integration Specialist</td>
        <td>2012/12/02</td>
        <td><a href="javascript:void(0)" target="_blank">Brielle Williamson</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Sales Assistant</td>
        <td>2012/08/06</td>
        <td><a href="javascript:void(0)" target="_blank">Herrod Chandler</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Integration Specialist</td>
        <td>2010/10/14</td>
        <td><a href="javascript:void(0)" target="_blank">Rhona Davidson</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Javascript Developer</td>
        <td>2009/09/15</td>
        <td><a href="javascript:void(0)" target="_blank">Colleen Hurst</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Software Engineer</td>
        <td>2008/12/13</td>
        <td><a href="javascript:void(0)" target="_blank">Sonya Frost</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Office Manager</td>
        <td>2008/12/19</td>
        <td><a href="javascript:void(0)" target="_blank">Jena Gaines</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Support Lead</td>
        <td>2013/03/03</td>
        <td><a href="javascript:void(0)" target="_blank">Quinn Flynn</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Regional Director</td>
        <td>2008/10/16</td>
        <td><a href="javascript:void(0)" target="_blank">Charde Marshall</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Senior Marketing Designer</td>
        <td>2012/12/18</td>
        <td><a href="javascript:void(0)" target="_blank">Haley Kennedy</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Regional Director</td>
        <td>2010/03/17</td>
        <td><a href="javascript:void(0)" target="_blank">Tatyana Fitzpatrick</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Marketing Designer</td>
        <td>2012/11/27</td>
        <td><a href="javascript:void(0)" target="_blank">Michael Silva</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Chief Financial Officer (CFO)</td>
        <td>2010/06/09</td>
        <td><a href="javascript:void(0)" target="_blank">Paul Byrd</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Systems Administrator</td>
        <td>2009/04/10</td>
        <td><a href="javascript:void(0)" target="_blank">Gloria Little</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Software Engineer</td>
        <td>2012/10/13</td>
        <td><a href="javascript:void(0)" target="_blank">Bradley Greer</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Personnel Lead</td>
        <td>2012/09/26</td>
        <td><a href="javascript:void(0)" target="_blank">Dai Rios</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Development Lead</td>
        <td>2011/09/03</td>
        <td><a href="javascript:void(0)" target="_blank">Jenette Caldwell</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Chief Marketing Officer (CMO)</td>
        <td>2009/06/25</td>
        <td><a href="javascript:void(0)" target="_blank">Yuri Berry</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Pre-Sales Support</td>
        <td>2011/12/12</td>
        <td><a href="javascript:void(0)" target="_blank">Caesar Vance</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Sales Assistant</td>
        <td>2010/09/20</td>
        <td><a href="javascript:void(0)" target="_blank">Doris Wilder</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Chief Executive Officer (CEO)</td>
        <td>2009/10/09</td>
        <td><a href="javascript:void(0)" target="_blank">Angelica Ramos</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Developer</td>
        <td>2010/12/22</td>
        <td><a href="javascript:void(0)" target="_blank">Gavin Joyce</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Regional Director</td>
        <td>2010/11/14</td>
        <td><a href="javascript:void(0)" target="_blank">Jennifer Chang</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Software Engineer</td>
        <td>2011/06/07</td>
        <td><a href="javascript:void(0)" target="_blank">Brenden Wagner</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Chief Operating Officer (COO)</td>
        <td>2010/03/11</td>
        <td><a href="javascript:void(0)" target="_blank">Fiona Green</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Regional Marketing</td>
        <td>2011/08/14</td>
        <td><a href="javascript:void(0)" target="_blank">Shou Itou</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Integration Specialist</td>
        <td>2011/06/02</td>
        <td><a href="javascript:void(0)" target="_blank">Michelle House</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Developer</td>
        <td>2009/10/22</td>
        <td><a href="javascript:void(0)" target="_blank">Suki Burks</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Technical Author</td>
        <td>2011/05/07</td>
        <td><a href="javascript:void(0)" target="_blank">Prescott Bartlett</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Team Leader</td>
        <td>2008/10/26</td>
        <td><a href="javascript:void(0)" target="_blank">Gavin Cortez</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Post-Sales support</td>
        <td>2011/03/09</td>
        <td><a href="javascript:void(0)" target="_blank">Martena Mccray</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td>Marketing Designer</td>
        <td>2009/12/09</td>
        <td><a href="javascript:void(0)" target="_blank">Unity Butler</a></td>
        <td>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-default">
              <span class="glyphicon glyphicon-edit"></span>
            </button>
            <button type="button" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </td>
      </tr>
    </tbody>

  </table>
</body>


</html>
like image 39
deblocker Avatar answered Nov 06 '22 11:11

deblocker

I have one suggestion you can have a look;

$(document).ready(function() {
   var total = $("#example tfoot th").length;

            $("#example tfoot th").each(function (index) {
                if (index !== total - 1) {
                    var title = $(this).text().trim();
                    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title +'"/>');
                }
            });


            var table = $("#example").DataTable({
                "bFilter": false // hide searchbox
            });

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change',
                    function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
            });
} );
tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
    .table-container{
      position: relative;
      margin: 20px;
    }
    .filters {
      position: absolute;
      top: 0;
      right: 0;
    }
    .datetimepicker{
      width: 180px;
      float: left;
      margin-left: 10px; 
    }
    .table-container .filters .form-control {
      height: 30px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-container">


<div class="filters">
        <div class="input-group date datetimepicker">
            <input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    
        <div class="input-group date datetimepicker">
            <input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
</div>


<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>
    </div>

Also you can check in JsFiddle: https://jsfiddle.net/L9ma7xn5/ I dont suggest to use bootstrap cols here only put it with positioning your objects correctly with positive absolute and relative.

If theres any other questions refer freely.

like image 45
Larry Bekchyan Avatar answered Nov 06 '22 12:11

Larry Bekchyan
Sign in to Comment

Related questions

Only show scrollbar when page scrolls in css
ES6 Default Parameters in nested objects
update with upsert: true is not updating in express,mongoose?
Meteor BrowserPolicy enable 'blob:' origins
React toggle component
Angular 2 - Firebase maintaining logged in state on page refresh
Howler.js error: ' An array of source files must be passed with any new Howl '
ngrx : how the reducers function are invoked, when it is invoked?
Changing O(n^3) to O(n^2) in JavaScript [duplicate]
use VueRouter and Vue.js in Chrome Extension - Issues with path segments
Convert JSX to JSON or String and then back again
Firebase-Admin, importing it to react application throws Module not found error
Inspect element without right clicking in Chrome
Replace array elements without losing reference?
Return value instead of a promise [to stop nested deferred promise]
How to set default date in daterangepicker?
Super expression must either be null or a function, not object
Combine two json sections into one json object [duplicate]
React-router v4 Page Refresh Not Working
How does __proto__ work when object is created with Object.create(null)

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!