metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Table component - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Table</a></li> <li class="toc-entry"><a href="#_table_create">Create table</a></li> <li class="toc-entry"><a href="#_table_options">Table options</a></li> <li class="toc-entry"><a href="#_table_columns">Columns</a></li> <li class="toc-entry"><a href="#_table_data">Data cells</a></li> <li class="toc-entry"><a href="#_table_sorting">Sorting</a></li> <li class="toc-entry"><a href="#_table_search">Table search</a></li> <li class="toc-entry"><a href="#_table_filtering">Filtering</a></li> <li class="toc-entry"><a href="#_table_pagination">Pagination</a></li> <li class="toc-entry"><a href="#_table_rows_counter">Rows counter</a></li> <li class="toc-entry"><a href="#_table_info">Table info</a></li> <li class="toc-entry"><a href="#_table_inspector">Table inspector</a></li> <li class="toc-entry"><a href="#_table_export">Export data</a></li> <li class="toc-entry"><a href="#_table_external_data">External data</a></li> <li class="toc-entry"><a href="#_table_events">Events</a></li> <li class="toc-entry"><a href="#_table_methods">Methods</a></li> <li class="toc-entry"><a href="#_table_customize">Customize</a></li> <li class="toc-entry"><a href="#_table_custom_wrappers">Custom wrappers</a></li> <li class="toc-entry"><a href="#_table_horizontal_scroll">Horizontal scroll</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Table component</h1> <p class="text-leader"> Create interactive table with sorting, filtering and pagination features. </p>  <h3 id="_table_create">Create table</h3> <p class="text-small">New in 4.2.8, updated in 4.2.23</p> <p> If you need to create interactive table with ordering, filtering, searching and pagination features, you can use Metro 4 <code>table</code> component. To create <code>table</code>, add attribute <code>data-role="table"</code> to your HTML table element and setup, if need, additional options with special attributes. You can create <code>table</code> and for your own HTML table with predefined data and for the table with remote data definition. </p> <p class="remark info"> An important condition - is the creation of sections <code>thead</code> and <code>tbody</code>. </p> <div class="example"> <table class="table striped table-border mt-4" data-role="table" data-cls-table-top="row flex-nowrap" data-cls-search="cell-md-8" data-cls-rows-count="cell-md-4" data-rows="5" data-rows-steps="5, 10" data-show-activity="false" data-source="data/table.json" > </table> </div> <pre><code class="html"> <table class="table" data-role="table"> ... </table> </code></pre> <h3 id="_table_options">Table options</h3> <p> You can use different options to define table behavior. This options you can use in <code><table></code> tag definition. </p> <table class="table table-border cell-border options-table mt-4"> <thead> <tr> <td>Option</td> <td>Data-*</td> <td>Default</td> <td>Desc</td> </tr> </thead> <tbody> <tr> <td><code>check</code></td> <td><code>data-check</code></td> <td>false</td> <td>Enable checkbox or radio for each row</td> </tr> <tr> <td><code>checkType</code></td> <td><code>data-check-type</code></td> <td>checkbox</td> <td>Draw checkbox or radio for each row</td> </tr> <tr> <td><code>checkStyle</code></td> <td><code>data-check-style</code></td> <td>1</td> <td>Set style for checkbox or radio, 1 or 2</td> </tr> <tr> <td><code>checkName</code></td> <td><code>data-check-name</code></td> <td>null</td> <td>Set name for checkbox or radio</td> </tr> <tr> <td><code>checkColIndex</code></td> <td><code>data-check-col-index</code></td> <td>0</td> <td>Data column index from 0 for checkbox or radio value</td> </tr> <tr> <td><code>checkStoreKey</code></td> <td><code>data-store-key</code></td> <td>TABLE:$1:KEYS</td> <td>Key for storage (used window.storage), where check value are stored. $1 will be replaced with table id.</td> </tr> <tr> <td><code>rownum</code></td> <td><code>data-rownum</code></td> <td>false</td> <td>Show/hide rows numbers</td> </tr> <tr> <td><code>rownumTitle</code></td> <td><code>data-rownum-title</code></td> <td>#</td> <td>Title for rownum head cell</td> </tr> <tr> <td><code>filters</code></td> <td><code>data-filters</code></td> <td></td> <td>Table filters definition, comma separated value with functions names</td> </tr> <tr> <td><code>filtersOperator</code></td> <td><code>data-filters-operator</code></td> <td>and</td> <td>Defined how filters combined, value <code>and</code> or <code>or</code></td> </tr> <tr> <td><code>source</code></td> <td><code>data-source</code></td> <td>null</td> <td>Link to external data</td> </tr> <tr> <td><code>searchMinLength</code></td> <td><code>data-search-min-length</code></td> <td>1</td> <td>Min length for begin searching</td> </tr> <tr> <td><code>searchThreshold</code></td> <td><code>data-search-threshold</code></td> <td>500</td> <td>The threshold in ms to begin searching, while user press keys for search phrase and the interval between key press less than this value, searching not started</td> </tr> <tr> <td><code>searchFields</code></td> <td><code>data-search-fields</code></td> <td></td> <td>Comma-separated value with column names, where will be search</td> </tr> <tr> <td><code>showRowsSteps</code></td> <td><code>data-show-rows-steps</code></td> <td>true</td> <td>Show/hide rows steps box</td> </tr> <tr> <td><code>showSearch</code></td> <td><code>data-show-search</code></td> <td>true</td> <td>Show/hide search field</td> </tr> <tr> <td><code>showTableInfo</code></td> <td><code>data-show-table-info</code></td> <td>true</td> <td>Show/hide table info block</td> </tr> <tr> <td><code>showPagination</code></td> <td><code>data-show-pagination</code></td> <td>true</td> <td>Show/hide table pagination</td> </tr> <tr> <td><code>paginationShortMode</code></td> <td><code>data-pagination-short-mode</code></td> <td>true</td> <td>Show table pagination in short mode</td> </tr> <tr> <td><code>showActivity</code></td> <td><code>data-show-activity</code></td> <td>true</td> <td>Show activity for table operations</td> </tr> <tr> <td><code>muteTable</code></td> <td><code>data-mute-table</code></td> <td>true</td> <td>Mute table for table operations</td> </tr> <tr> <td><code>rows</code></td> <td><code>data-rows</code></td> <td>10</td> <td>How many rows will be displayed on page, if this value is -1, all rows will be displayed</td> </tr> <tr> <td><code>rowsSteps</code></td> <td><code>data-rows-steps</code></td> <td>10, 25, 50, 100</td> <td>Steps fo rows select box</td> </tr> <tr> <td><code>staticView</code></td> <td><code>data-static-view</code></td> <td>false</td> <td>If true, table always displayed as defined</td> </tr> <tr> <td><code>viewSaveMode</code></td> <td><code>data-view-save-mode</code></td> <td>client</td> <td>Where table view will be saved, values: client, server</td> </tr> <tr> <td><code>viewSavePath</code></td> <td><code>data-view-save-path</code></td> <td>TABLE:$1:OPTIONS</td> <td>Key for client-side, href for server-side. $1 will be replaced with table id</td> </tr> <tr> <td><code>decimalSeparator</code></td> <td><code>data-decimal-separator</code></td> <td>. (dot)</td> <td>Decimal separator for numeric values. Used for right sorting</td> </tr> <tr> <td><code>thousandSeparator</code></td> <td><code>data-thousand-separator</code></td> <td>, (comma)</td> <td>Thousand separator for numeric values. Used for right sorting</td> </tr> <tr> <td><code>tableRowsCountTitle</code></td> <td><code>data-table-rows-count-title</code></td> <td>Show entries:</td> <td>Title for rows steps box</td> </tr> <tr> <td><code>tableSearchTitle</code></td> <td><code>data-table-search-title</code></td> <td>Search:</td> <td>Title for search input</td> </tr> <tr> <td><code>tableInfoTitle</code></td> <td><code>data-table-info-title</code></td> <td>Showing $1 to $2 of $3 entries</td> <td>Title for table info block</td> </tr> <tr> <td><code>paginationPrevTitle</code></td> <td><code>data-pagination-prev-title</code></td> <td>Prev</td> <td>Title pagination prev button</td> </tr> <tr> <td><code>paginationNextTitle</code></td> <td><code>data-pagination-next-title</code></td> <td>Next</td> <td>Title pagination next button</td> </tr> <tr> <td><code>allRecordsTitle</code></td> <td><code>data-all-records-title</code></td> <td>All</td> <td>Title all records in rows steps block</td> </tr> <tr> <td><code>inspectorTitle</code></td> <td><code>data-inspector-title</code></td> <td>Inspector</td> <td>Title for table inspector window</td> </tr> <tr> <td><code>activityType</code></td> <td><code>data-activity-type</code></td> <td>cycle</td> <td>Activity type for long operations</td> </tr> <tr> <td><code>activityStyle</code></td> <td><code>data-activity-style</code></td> <td>color</td> <td>Activity style for long operations</td> </tr> <tr> <td><code>activityTimeout</code></td> <td><code>data-activity-timeout</code></td> <td>100</td> <td>Timeout between activity show and table operation start</td> </tr> <tr> <td><code>cellWrapper</code></td> <td><code>data-cell-wrapper</code></td> <td>true</td> <td>If true, cell data will be placed in div with class <code>cell-wrapper</code></td> </tr> <tr> <td><code>horizontalScroll</code></td> <td><code>data-horizontal-scroll</code></td> <td>false</td> <td>Helper to create table horizontal scrolling for wide table</td> </tr> </tbody> </table> <div class="example"> <table class="table striped table-border mt-4" data-role="table" data-rows="5" data-rows-steps="5, 10" data-show-activity="false" data-source="data/table.json" data-rownum="true" data-check="true" data-check-style="2" > </table> </div> <pre><code class="html"> <table class="table striped table-border mt-4" data-role="table" data-rows="5" data-rows-steps="5, 10" data-show-activity="false" data-source="data/table.json" data-rownum="true" data-check="true" data-check-style="2" > </table> </code></pre>  <h3 id="_table_columns">Columns definition</h3> <p> For right works component, you must right define columns. Columns must be defined in <code>thead</code> section. You can use any attributes to define its: </p> <table class="table table-border cell-border options-table mt-4"> <thead> <tr> <td>Attribute</td> <td>Desc</td> </tr> </thead> <tbody> <tr> <td><code>data-name</code></td> <td>Column name</td> </tr> <tr> <td><code>data-sortable</code></td> <td>Sortable column or not. Values: <code>true</code>, <code>false</code></td> </tr> <tr> <td><code>data-sort-dir</code></td> <td>Initial sorting direction. Values: <code>asc</code>, <code>desc</code></td> </tr> <tr> <td><code>data-format</code></td> <td>Data format helper for right sorting. Values: <code>string</code> (default), <code>date</code>, <code>number</code>, <code>int</code>, <code>float</code>, <code>money</code></td> </tr> <tr> <td><code>data-format-mask</code></td> <td>If you data is date, and date not in ECMAScript date format, you must define data mask (see Extensions for string.toDate in <a href="dateformat.html">this article</a>)</td> </tr> <tr> <td><code>data-size</code></td> <td>If can define size for column.</td> </tr> <tr> <td><code>data-show</code></td> <td>If can define show or hide column.</td> </tr> <tr> <td><code>data-cls</code></td> <td>If can define additional classes for column heading cell.</td> </tr> <tr> <td><code>data-cls-column</code></td> <td>If can define additional classes for column data cells.</td> </tr> </tbody> </table> <pre><code class="html"> <table class="table" data-role="table"> <thead> <tr> <th data-sortable="true" data-sort-dir="asc">Name</th> <th data-sortable="true">Office</th> <th data-sortable="true" data-format="number">Age</th> <th data-sortable="true" data-format="date">Start date</th> <th data-sortable="true" data-show="false" data-format="money">Salary</th> </tr> </thead> ... </table> </code></pre> <p class="remark info"> Currently, you can define only one row in head section. </p> <h3 id="_table_data">Data definition</h3> <p> Data must be defined in <code>tbody</code> section. If you want to add classes to data cell, use <code>head cell</code> attribute <code>data-cls-column</code>. </p> <div class="example"> <table id="t1" class="table striped table-border mt-4" data-role="table" data-static-view="true" data-cls-table-top="row flex-nowrap" data-cls-search="cell-md-8" data-cls-rows-count="cell-md-4" data-rows="5" data-rows-steps="5, 10" data-show-activity="false"> <thead> <tr> <th class="sort-asc" data-sortable="true">Name</th> <th data-sortable="true">Office</th> <th data-cls-column="bg-cyan fg-white text-center" data-sortable="true" data-format="number">Age</th> <th data-cls-column="bg-orange fg-white text-center" data-sortable="true" data-format="date">Start date</th> <th data-cls-column="bg-green fg-white text-right" data-sortable="true" data-format="money">Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Sonya Frost</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> </tbody> </table> </div> <pre><code class="html"> <table class="table" data-role="table"> <thead> <tr> <th >Name</th> <th >Office</th> <th data-cls-column="bg-cyan fg-white text-center">Age</th> <th data-cls-column="bg-orange fg-white text-center" >Start date</th> <th data-cls-column="bg-green fg-white text-right" >Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> ... </tbody> </table> </code></pre> <h3 id="_table_sorting">Table sorting</h3> <p> To use <code>sorting</code>, you must define columns, who can be sorted. To create sortable column, add attribute <code>data-sortable="true"</code> to head cell. If you need to sort on this column after table init, add attribute <code>data-sort-dir="asc|desc"</code> for initializing sorting direction. </p> <p> If data for sortable column is a not string, you must use attribute <code>data-format</code>. If data is date and date not in ECMAScript format, you must add attribute <code>data-format-mask</code>. More about covert string to date you can read in <a href="dateformat.html">this article</a> </p> <div class="example"> <table class="table striped table-border mt-4" data-role="table" data-cls-table-top="row flex-nowrap" data-cls-search="cell-md-8" data-cls-rows-count="cell-md-4" data-rows="5" data-rows-steps="5, 10" data-show-activity="false" data-source="data/table.json" > </table> </div> <pre><code class="html"> <table class="table" data-role="table"> <thead> <tr> <th data-sortable="true" data-sort-dir="asc">ID</th> <th data-sortable="true">Name</th> <th data-sortable="true" data-format="date" data-format-mask="%d-%m-%y" >Start</th> <th data-sortable="true" data-format="int">Age</th> <th data-sortable="true" data-format="money">Salary</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>25/04/2011</td> <td>61</td> <td>$320,800</td> </tr> ... </tbody> </table> </code></pre> <h3 id="_table_search">Table search</h3> <p> Table component support interactive search. To activate search function you must: </p> <ol class="decimal mt-4"> <li>Enable search input field with attribute <code>data-show-search="true"</code> (enabled by default)</li> <li>Set min string length for search with attribute <code>data-search-min-length</code> (default: 1)</li> <li>Setup threshold for start search with attribute <code>data-search-threshold</code> (default: 500)</li> </ol> <div class="example"> <table class="table striped table-border mt-4" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-show-rows-steps="false" data-show-search="true" data-search-min-length="3" data-search-threshold="300" > </table> </div> <pre><code class="html"> <table class="table" data-role="table" data-show-search="true" data-search-min-length="3" data-search-threshold="300" > </table> </code></pre> <p> By default, all fields are searched. You can define the fields to be searched for. To define it use attribute <code>data-search-fields</code>. Fields list is must be a comma separated string with field names, defined in head cell attribute <code>data-name</code>. </p> <pre><code class="html"> <table class="table" data-role="table" data-show-search="true" data-search-min-length="3" data-search-threshold="300" data-search-fields="name, age"> <thead> <tr> <th data-name="id" >ID</th> <th data-name="name" >Name</th> <th data-name="start" >Start</th> <th data-name="age" >Age</th> <th data-name="salary" >Salary</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>25/04/2011</td> <td>61</td> <td>$320,800</td> </tr> ... </tbody> </table> </code></pre> <h3 id="_table_filtering">Filtering</h3> <p> Table components contains API to create custom filters for data. These <code>filters</code> works before <code>search</code> and is connected with it by the <code>and</code> operator if search is not empty. These filters are user-defined functions and can be applied in two ways: with attribute <code>data-filters</code> and with table api method <code>addFilter</code>. In both cases, the functions must be defined before they are used. </p> <h4 class="text-light">Use attribute</h4> <div class="example"> <script> function myFilter(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Jak"); } </script> <table class="table striped table-border mt-4" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-show-rows-steps="false" data-show-search="true" data-search-min-length="3" data-search-threshold="300" data-filters="myFilter" > </table> </div> <pre><code> <script> function myFilter(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Jak"); } </script> <table class="table" data-role="table" data-filters="myFilter" > ... </table> </code></pre> <h4 class="text-light">Use table API</h4> <div class="example"> <div> <input type="checkbox" data-role="switch" data-caption="Apply filter" onchange="toggleFilter(this.checked)"> </div> <table class="table striped table-border mt-4" id="t-flt" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-show-rows-steps="false" data-show-search="false" > </table> <script> var filterIndex; function toggleFilter(checked){ var table = $('#t-flt').data('table'); if (checked) { filterIndex = table.addFilter(function(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Jak"); }, true); } else { table.removeFilter(filterIndex, true); } } </script> </div> <pre><code> <div> <input type="checkbox" data-role="switch" data-caption="Apply filter" onchange="toggleFilter(this.checked)"> </div> <table class="table striped table-border mt-4" id="t-flt" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-show-rows-steps="false" data-show-search="false" > </table> <script> var filterIndex; function toggleFilter(checked){ var table = $('#t-flt').data('table'); if (checked) { filterIndex = table.addFilter(function(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Jak"); }, true); } else { table.removeFilter(filterIndex, true); } } </script> </code></pre> <h4 class="text-light">Filters operator</h4> <p> By default, all filters applied with operator <code>and</code>. You can set this to operator <code>or</code> with attribute <code>data-filters-operator="or"</code>. </p> <div class="example"> <div> <input type="checkbox" data-role="switch" data-caption="Apply filter Jak" onchange="toggleFilter2(this.checked)"> <input type="checkbox" data-role="switch" data-caption="Apply filter Simon" onchange="toggleFilter3(this.checked)"> </div> <table class="table striped table-border mt-4" id="t-flt-2" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-show-rows-steps="false" data-show-search="false" data-filters-operator="or" > </table> <script> var filterIndex2, filterIndex3; function toggleFilter2(checked){ var table = $('#t-flt-2').data('table'); if (checked) { filterIndex2 = table.addFilter(function(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Jak"); }, true); } else { table.removeFilter(filterIndex2, true); } } function toggleFilter3(checked){ var table = $('#t-flt-2').data('table'); if (checked) { filterIndex3 = table.addFilter(function(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Simon"); }, true); } else { table.removeFilter(filterIndex3, true); } } </script> </div> <pre><code> <div> <input type="checkbox" data-role="switch" data-caption="Apply filter Jak" onchange="toggleFilter2(this.checked)"> <input type="checkbox" data-role="switch" data-caption="Apply filter Simon" onchange="toggleFilter3(this.checked)"> </div> <table class="table striped table-border mt-4" id="t-flt-2" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-show-rows-steps="false" data-show-search="false" data-filters-operator="or" > </table> <script> var filterIndex2, filterIndex3; function toggleFilter2(checked){ var table = $('#t-flt-2').data('table'); if (checked) { filterIndex2 = table.addFilter(function(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Jak"); }, true); } else { table.removeFilter(filterIndex2, true); } } function toggleFilter3(checked){ var table = $('#t-flt-2').data('table'); if (checked) { filterIndex3 = table.addFilter(function(row, heads){ var is_active_index = 0; heads.forEach(function(el, i){ if (el.name === "name") { is_active_index = i; } }); return row[is_active_index].contains("Simon"); }, true); } else { table.removeFilter(filterIndex3, true); } } </script> </code></pre> <p class="remark warning"> <code>Filters</code> works before <code>search</code> and is connected with it by the <code>and</code> operator if search is not empty. </p>  <h3 id="_table_pagination">Pagination</h3> <p> To use pagination option, this options must be anabled with attribute <code>data-show-pagination="true"</code> (enabled by default). By default, used pagination short mode. If you need show all pages links in pagination, you can set it with attribute <code>data-pagination-short-mode="false"</code>. </p> <h4>Pagination short mode</h4> <div class="example"> <table class="table striped table-border mt-4" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-pagination-short-mode="true" > </table> </div> <pre><code class="html"> <table class="table" data-role="table" data-pagination-short-mode="true"> ... </table> </code></pre> <h4>Pagination all mode</h4> <div class="example"> <table class="table striped table-border mt-4" data-role="table" data-rows="5" data-rows-steps="5, 10" data-source="data/table.json" data-pagination-short-mode="false" >