<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>

<!-- 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>

$("#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'
    }
});