Excel-Type jQuery Desk Filters & Paging – tableSearch

jquery-table-search is a light-weight jQuery plugin that provides Excel-style column filters, sorting, and non-compulsory pagination to Bootstrap 5 HTML tables.

It processes present desk rows within the browser or hundreds filtered pages from a JSON endpoint.

Options

• Header popups with per-column textual content, numeric, date, and foreign money filters.
• Accommodates, equals, begins with, ends with, comparability, and empty-value operators for the suitable column varieties.
• Two circumstances inside a column, joined by AND or OR, plus configurable logic throughout columns.
• Three-state column sorting with pure textual content comparability and configurable preliminary kind.
• Consumer-side filtering and sorting for server-rendered HTML tables.
• AJAX-driven filtering, sorting, and pagination with a documented JSON request contract.
• Non-compulsory page-size selector, numbered web page buttons, First/Final controls, and record-count textual content.
• Per-column management over kind, filter, and situation controls.
• Responsive filter popups, non-compulsory cellular backside sheets, and horizontal desk scrolling.
• Strategies and occasions for refreshing rows, clearing filters, studying state, and dealing with AJAX outcomes.

How To Use It

Load Bootstrap 5 CSS, each tableSearch stylesheets, jQuery, and the plugin scripts within the doc.

<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<hyperlink rel="stylesheet" href="src/jquery.tableSearch.bundle.css">
<hyperlink rel="stylesheet" href="src/jquery.tableSearch.responsive.css">
<hyperlink rel="stylesheet" href="src/jquery.tablePager.bundle.css">

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="src/jquery.tableSearch.js"></script>
<script src="src/jquery.tablePager.js"></script>

Primary Utilization: Filter, Kind, and Web page an HTML Desk

The plugin reads the final row in <thead> and the primary <tbody>. Initialize tableSearch() earlier than tablePager() on the identical desk.

<desk id="staffTable" class="desk table-bordered table-hover">
  <thead>
    <tr>
      <th data-type="string" data-field="title">Worker</th>
      <th data-type="string" data-field="division">Division</th>
      <th data-type="date" data-field="joined">Joined</th>
      <th data-currency data-field="wage">Wage</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Alex Morgan</td><td>Engineering</td><td>2024-04-12</td><td>89000</td></tr>
    <tr><td>Jordan Lee</td><td>Design</td><td>2023-09-05</td><td>78000</td></tr>
    <tr><td>Casey Rivera</td><td>Engineering</td><td>2025-01-17</td><td>92000</td></tr>
    <tr><td>Taylor Brooks</td><td>Assist</td><td>2022-11-21</td><td>65000</td></tr>
  </tbody>
</desk>

<div class="d-flex align-items-center justify-content-between gap-2">
  <span id="staffInfo"></span>
  <span id="staffPager"></span>
</div>

<script>
  $(operate () {
    $('#staffTable').tableSearch({
      dateFormat: 'YYYY-MM-DD',
      showLogicOperator: true,
      currencySymbol: '$',
      columnLogic: 'and'
    });

    $('#staffTable').tablePager({
      pageSize: 2,
      pager: '#staffPager',
      data: '#staffInfo',
      showPageNumbers: true,
      showFirstLast: true
    });
  });
</script>

Column Varieties and HTML Attributes

• data-type (string). Units the parser and obtainable operators: string, numeric, or date. Default: string.
• data-currency (attribute or string). Treats a column as numeric foreign money. An non-compulsory worth units its image.
• data-sortable (boolean string). Overrides whether or not this header provides sorting.
• data-filterable (boolean string). Overrides whether or not this header provides filtering.
• data-logic (boolean string). Overrides the second situation and AND/OR radios for this column.
• data-field (string). Maps a header to a area in server-returned JSON, together with dot-separated property names.
• data-sort-value (string). Overrides the displayed cell textual content for client-side sorting and filtering. Put this attribute on <td>.

Server-Facet Filtering, Sorting, and Pagination

Use the desk and belongings from the fundamental instance. Exchange /api/employees with an endpoint that applies the requested filters, kind order, and pagination. The server returns the matching report depend and solely the requested web page of rows.

$(operate () {
  $('#staffTable tbody').empty();

  $('#staffTable').tableSearch({
    processing: 'server',
    pageSize: 10,
    dateFormat: 'YYYY-MM-DD',
    showLogicOperator: true,
    ajax: {
      url: '/api/employees',
      methodology: 'POST',
      contentType: 'json'
    },
    responseMap: { rows: 'knowledge', whole: 'whole' }
  });

  $('#staffTable').tablePager({
    processing: 'server',
    pageSize: 10,
    pager: '#staffPager',
    data: '#staffInfo',
    showPageNumbers: true
  });
});

By default, every JSON POST incorporates a one-based web page, pageSize, kind, columnLogic, and filters. The instance under represents a filter for Engineering staff ordered by becoming a member of date.

{
  "web page": 1,
  "pageSize": 10,
  "kind": { "column": 2, "area": "joined", "path": "asc" },
  "columnLogic": "and",
  "filters": [
    {
      "column": 1,
      "field": "department",
      "type": "string",
      "logic": "and",
      "conditions": [
        { "operator": "eq", "value": "Engineering" }
      ]
    }
  ]
}

Your endpoint ought to return the requested information beneath knowledge and the overall variety of matching information throughout all pages beneath whole. Set responseMap when your API makes use of totally different property names.

{
  "knowledge": [
    { "name": "Alex Morgan", "department": "Engineering", "joined": "2024-04-12", "salary": 89000 },
    { "name": "Casey Rivera", "department": "Engineering", "joined": "2025-01-17", "salary": 92000 }
  ],
  "whole": 2
}

The request format helps incorporates, not_contains, eq, neq, begins, ends, gt, gte, lt, lte, empty, and not_empty. Date filter values use ISO YYYY-MM-DD in requests. The server implements the comparisons and returns the right web page.

All Configuration Choices

tableSearch: Normal Choices

• processing (string). Selects browser-side DOM processing or server AJAX processing. Default: consumer.
• showSortIcon (boolean). Reveals sorting controls within the headers. Default: true.
• showFilterIcon (boolean). Reveals the filter button and its popup. Default: true.
• sortOnHeaderClick (boolean). Lets the entire sortable header cycle by means of sorting states. Default: true.
• defaultSortColumn (quantity or string). Units the initially sorted column by index or header textual content. Default: null.
• defaultSortDirection (string). Units the preliminary order to asc or desc. Default: asc.
• debounceTime (quantity). Waits this many milliseconds after filter enter modifications. debounce is a legacy alias. Default: 150.
• showLogicOperator (boolean). Permits a second situation and AND/OR selector inside every column filter. Default: false.
• defaultLogic (string). Units the preliminary operator between two circumstances in a single column. Default: and.
• columnLogic (string). Combines filters from totally different columns with AND or OR. Default: and.
• columns (object or null). Overrides sortable and filterable by column index, label, or area. Default: null.
• disableSort (array or null). Disables sorting for listed columns. Default: null.
• disableFilter (array or null). Disables filtering for listed columns. Default: null.
• showNoData (boolean). In consumer mode, inserts a message row when no information match. Default: true.
• onFilter (operate or null). Receives { seen, whole } after filtering. Default: null.
• onSort (operate or null). Receives { column, path } after sorting. Default: null.
• labels (object). Customizes sorting, filter, standing, and operator labels. Default: English labels.

tableSearch: Parsing, Forex, and Responsive Choices

• dateFormat (string). Controls date parsing with YYYY, YY, MM, M, DD, and D tokens. Default: auto.
• dateOrder (string). Selects dmy or mdy for ambiguous dates when automated parsing is used. Default: dmy.
• numericRegex (RegExp). Removes formatting characters earlier than numeric comparisons. Default: /[^0-9.-]+/g.
• decimalSeparator (string). Units the decimal character to a interval or comma. Default: ..
• currencySymbol (string). Units the default foreign money image for marked columns. Default: $.
• currencyPosition (string). Locations the image earlier than or after the formatted worth. Default: prefix.
• currencyFormatCells (boolean). Codecs marked foreign money cells and restores their unique textual content on destroy. Default: true.
• currencyLocale (string or null). Units the number-formatting locale; null selects the locale from decimalSeparator. Default: null.
• emptyLast (boolean). Locations empty values final throughout sorting. Default: true.
• locale (string or undefined). Units the locale handed to Intl.Collator. Default: undefined.
• collator (object). Configures pure textual content sorting. Default: { numeric: true, sensitivity: "base" }.
• responsive (boolean). Positions filter popups inside the viewport. Default: true.
• responsiveWrap (boolean). Provides a horizontally scrolling wrapper when an acceptable wrapper is absent. Default: true.
• mobileSheet (boolean). Shows filter popups as backside sheets on the cellular breakpoint. Default: false.
• mobileBreakpoint (quantity). Units the bottom-sheet breakpoint in pixels when mobileSheet is enabled. Default: 575.

tableSearch: Server Choices

• pageSize (quantity). Units the variety of information requested per web page. Default: 10.
• initialLoad (boolean). Requests the primary web page throughout initialization. Default: true.
• requestDebounce (quantity). Merges fast filter and type modifications earlier than an AJAX request. Default: 100.
• resetPageOnFilter (boolean). Returns to web page 1 when filters change. Default: true.
• resetPageOnSort (boolean). Returns to web page 1 when sorting modifications. A paired pager can override this. Default: true.
• ajax (object). Defines the endpoint, HTTP settings, payload mapping, and additional request knowledge. Default: configured suboptions.
• responseMap (object or operate). Maps the AJAX response to rows and matching-record depend. Default: { rows: "knowledge", whole: "whole" }.
• renderRow (operate or null). Builds a desk row from every JSON report. The default makes use of data-field and textual content cells. Default: null.
• onLoad (operate or null). Runs after a profitable server response. Default: null.
• onError (operate or null). Runs after a failed server response. Default: null.

AJAX Request Settings

• ajax.url (string or operate). Specifies the endpoint; a operate receives the request object. Default: null.
• ajax.methodology (string). Units the HTTP methodology. Default: POST.
• ajax.contentType (string). Sends a JSON physique or form-encoded fields; GET makes use of question parameters. Default: json.
• ajax.dataType (string). Units the anticipated response knowledge sort. Default: json.
• ajax.headers (object or null). Provides request headers. Default: null.
• ajax.timeout (quantity). Units the request timeout in milliseconds. Default: 0.
• ajax.cache (boolean). Controls caching for GET requests. Default: false.
• ajax.knowledge (object, operate, or null). Merges further fields or replaces the payload by means of a operate. Default: null.
• ajax.settings (object or null). Passes further settings to $.ajax. Default: null.
• ajax.paramNames (object). Renames outgoing request keys. Default: { web page, pageSize, kind, filters, columnLogic }.

tablePager Choices

• enabled (boolean). Permits paging at initialization. Default: true.
• processing (string). Detects a paired server-mode tableSearch plugin or selects consumer/server. Default: auto.
• pageSize (quantity or null). Makes use of ten rows per web page, or the paired server search web page dimension. Default: null.
• pageSizes (array). Defines selections within the page-size selector. Default: [5, 10, 25, 50].
• pager (selector, component, jQuery object, or null). Units the container for pager controls. Default: null.
• data (selector, component, jQuery object, or null). Units the vacation spot for record-count textual content. Default: null.
• autoBuildPager (boolean). Builds a pager after the desk when no pager goal is provided. Default: true.
• showPageSizeSelect (boolean). Shows the page-size selector. Default: true.
• showInfo (boolean). Shows record-count textual content. Default: true.
• showPageLabel (boolean). Shows the present web page and web page depend. Default: true.
• showFirstLast (boolean). Reveals First and Final navigation buttons. Default: false.
• showPageNumbers (boolean). Reveals numbered web page buttons. Default: false.
• maxPageButtons (quantity). Limits numbered navigation objects, together with ellipses. Default: 7.
• resetPageOnFilter (boolean). Returns to the primary web page after filtering. Default: true.
• resetPageOnSort (boolean). Retains the web page quantity after sorting. Default: false.
• rowSelector (selector, operate, or null). Overrides how client-side rows are chosen for pagination. Default: null.
• initialLoad (boolean). Masses the primary web page when tablePager operates as a standalone server pager. Default: true.
• ajax (object). Configures standalone server pagination requests. Makes use of the identical AJAX keys as tableSearch, with web page and pageSize in paramNames. Default: configured suboptions.
• responseMap (object or operate). Maps the standalone server pager response. Default: { rows: "knowledge", whole: "whole" }.
• renderRow (operate or null). Renders a row in standalone server mode. Default: null.
• labels (object). Customizes web page textual content, controls, loading messages, and errors. Default: English labels.
• onChange (operate or null). Runs after every pagination repaint. Default: null.
• onLoad (operate or null). Runs after a profitable standalone server response. Default: null.
• onError (operate or null). Runs after a failed standalone server response. Default: null.

API Strategies

tableSearch Strategies

var $desk = $('#staffTable');

$desk.tableSearch('refresh');        // Re-read consumer rows or reload server knowledge.
$desk.tableSearch('applyFilters');   // Reapply the lively consumer filters.
$desk.tableSearch('clearFilters');   // Take away the lively filters.
$desk.tableSearch('clearSort');      // Restore the unique order.
var searchState = $desk.tableSearch('getState');
// Consists of filters, kind, visibleRows, totalRows, processing.
// Server mode:
$desk.tableSearch('web page', 2);         // Fetch web page 2.
var web page = $desk.tableSearch('web page');
$desk.tableSearch('pageSize', 25);    // Change requested web page dimension.
var pageSize = $desk.tableSearch('pageSize');
$desk.tableSearch('reload');         // Fetch the lively web page once more.
$desk.tableSearch('abort');          // Cancel the pending/in-flight request.
$desk.tableSearch('destroy');        // Take away plugin UI and restore desk state.

tablePager Strategies

var $desk = $('#staffTable');

$desk.tablePager('web page', 3);        // Go to web page 3.
var web page = $desk.tablePager('web page');
$desk.tablePager('pageSize', 25);   // Change web page dimension and reset to web page 1.
var pageSize = $desk.tablePager('pageSize');
var pages = $desk.tablePager('pages');
var whole = $desk.tablePager('whole');
$desk.tablePager('refresh');       // Recollect rows or reload the server web page.
$desk.tablePager('reload');        // Alias of refresh.
$desk.tablePager('cover');          // Conceal paging; consumer mode shows all rows.
$desk.tablePager('present');          // Re-enable paging.
var pagerState = $desk.tablePager('getState');
// Consists of enabled, processing, web page, pageSize, pages, whole, from, to, loading.
$desk.tablePager('destroy');       // Take away pager UI and handlers.

Name tablePager("destroy") earlier than tableSearch("destroy") when eradicating each plugins. In server mode, tablePager("cover") hides the controls however server-side paging continues.

Supply-Uncovered Parsing Utilities

// Parsing and formatting helpers uncovered on $.fn.tableSearch.
var quantity = $.fn.tableSearch.parseNumber('$1,250.00', '.');
var dateParser = $.fn.tableSearch.compileDateFormat('YYYY-MM-DD');
var utcTimestamp = dateParser('2026-11-12');
var otherTimestamp = $.fn.tableSearch.parseDate('11/12/2026', 'mdy');
var dateText = $.fn.tableSearch.formatDate(utcTimestamp, 'YYYY-MM-DD');

Occasions and Callbacks

Bind handlers to the desk earlier than initialization if the preliminary server request should be noticed.

var $desk = $('#staffTable');

$desk.on('tablesearch:filter', operate (occasion, data) {
  // data: { seen, whole }
});
$desk.on('tablesearch:kind', operate (occasion, data) {
  // data: { column, path }
});
$desk.on('tablesearch:request', operate (occasion, request) {
  // Server mode: request payload.
});
$desk.on('tablesearch:load', operate (occasion, data) {
  // Server mode: { rows, whole, web page, pageSize, pages, response }
});
$desk.on('tablesearch:error', operate (occasion, data) {
  // Server mode: { standing, error, xhr }
});
$desk.on('tablesearch:abort', operate () {
  // Server request cancelled.
});

$desk.on('tablepager:change', operate (occasion, data) {
  // { web page, pageSize, pages, whole, from, to, enabled, processing, loading }
});
$desk.on('tablepager:request', operate (occasion, request) {
  // Standalone server pager solely.
});
$desk.on('tablepager:error', operate (occasion, data) {
  // Standalone server pager solely: { standing, error, xhr }
});

Associated Sources

This superior jQuery plugin is developed by Muhammad-Asif5. For extra Superior Usages, please verify the demo web page or go to the official web site.