This repository was archived by the owner on Feb 5, 2025. It is now read-only.
This repository was archived by the owner on Feb 5, 2025. It is now read-only.
Datatables: Filter plugin won't work if table was set to 'serverSide' #1092
Description
Hello, I'm trying to figure out why the Filter plugin won't work if a table has serverSide: true. When I set it to false, like in the examples, it works perfectly, but I need it to be server-side because I will be listing a lot of rows.
Everything else, such as pagination and sorting, works in both cases.
Thanks in advance.
Files included
<script src="{{ URL::asset('ui/js/jquery.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/bootstrap-select.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/datatables.js') }}"></script>
<script src="{{ URL::asset('ui/js/patternfly.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/patternfly.dataTables.pfEmpty.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/patternfly.dataTables.pfFilter.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/patternfly.dataTables.pfPagination.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/patternfly.dataTables.pfResize.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/patternfly.dataTables.pfSelect.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/angular.js') }}"></script>
<script src="{{ URL::asset('ui/js/angular-patternfly.js') }}"></script>
<script src="{{ URL::asset('ui/js/angular-sanitize.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/ui-bootstrap-tpls.js') }}"></script>
<script src="{{ URL::asset('ui/js/c3.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/d3.min.js') }}"></script>
<script src="{{ URL::asset('ui/js/jquery.matchHeight-min.js') }}"></script>
HTML code
<!-- Toolbar -->
<div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1">
<div class="col-sm-12">
<form class="toolbar-pf-actions">
<div class="form-group toolbar-pf-filter">
<label class="sr-only" for="filter">Filter</label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Filter <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" id="filter1">Alias</a></li>
<li><a href="#" id="filter2">IP Address</a></li>
<li><a href="#" id="filter3">Status</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="Filter By Rendering Engine..." autocomplete="off" id="filterInput">
</div>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-9">
<div class="hidden">
<h5>0 Results</h5>
<p>Active filters:</p>
<ul class="list-inline"></ul>
<p><a href="#">Clear All Filters</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Table HTML -->
<table class="table table-striped table-bordered table-hover" id="table1">
<thead>
<tr style="white-space: nowrap">
<th>Company ID</th>
<th>Date</th>
<th>Invoice date</th>
<th>Client name</th>
<th>Client ID</th>
<th>Invoice type</th>
<th>Total</th>
<th>Actions</th>
</tr>
</thead>
</table>
<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
<div class="form-group">
<select class="selectpicker pagination-pf-pagesize">
<option value="6">6</option>
<option value="10" >10</option>
<option value="15" selected="selected">15</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<span>per page</span>
</div>
<div class="form-group">
<span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
<ul class="pagination pagination-pf-back">
<li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
<li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
</ul>
<label for="pagination1-page" class="sr-only">Current Page</label>
<input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
<span>of <span class="pagination-pf-pages">5</span></span>
<ul class="pagination pagination-pf-forward">
<li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
<li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
</ul>
</div>
</form>
Javascript
$("#table1").DataTable({
columns: [
{ data: "column1" },
...
],
serverSide: true,
processing: true,
ajax: "<?= url( "api/v1/invoicing" ) ?>?dt=1",
dom: "t",
order: [[ 1, 'desc' ]],
pfConfig: {
filterCaseInsensitive: true,
filterCols: [
{
default: true,
optionSelector: "#filter1",
placeholder: "Filter By Alias..."
}, {
optionSelector: "#filter2",
placeholder: "Filter By Browser..."
}, {
optionSelector: "#filter3",
placeholder: "Filter By Platform(s)..."
}, {
optionSelector: "#filter4",
placeholder: "Filter By Engine Version..."
}, {
optionSelector: "#filter5",
placeholder: "Filter By CSS Grade..."
}
],
paginationSelector: "#pagination1",
toolbarSelector: "#toolbar1",
colvisMenuSelector: '.table-view-pf-colvis-menu'
}
});