%PDF-
%PDF-
Mini Shell
Mini Shell
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Limit rows processing | vuejs-datatable</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">vuejs-datatable</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
</ul>
<h1> Limit rows processing</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#introduction" id="introduction" style="color: inherit; text-decoration: none;">
<h2>Introduction</h2>
</a>
<p>If the processing of your rows is very expensive (like if it is fetched from an API, or requires a heavy computation), you may want to limit the number of calls to this function. For instance, if you want to automatically refresh data on text filter changes, you would avoid re-process everything on every key press.</p>
<p>This process of limitation is <em>very important</em> to reduce your load & improve performances, and it can be seen in two main variations:</p>
<dl class="inlined-elements">
<div><dt>debouncing</dt><dd>runs after a cooldown of <var>n</var> ms</dd></div>
<div><dt>throttling</dt><dd>runs at most every <var>n</var> ms</dd></div>
</dl>
<p>You can check out <a href="https://css-tricks.com/debouncing-throttling-explained-examples/">this nice article on CSS-Tricks</a> for more informations about the difference between those kind of functions.</p>
<p>In this example, we use the <a href="https://lodash.com/docs/4.17.11#debounce"><code>_.debounce</code> function from <em>lodash</em></a> to call <code>processRows</code> only when the user stop typing for 1s.</p>
<div class="alert alert-info">
<i class="fas fa-info-circle"></i>
See the ajax tutorial via <a href="./ajax-data.html">data function</a> or <a href="./ajax-handler.html">custom handlers</a> for a more detailed example of AJAX data querying.
</div>
<a href="#demo" id="demo" style="color: inherit; text-decoration: none;">
<h2>Demo</h2>
</a>
<div id="demo-app" class="tutorial-limit-rows-processing"><div class="row"><div class="col-xs-12 col-md-4 form-inline"><div class="form-group"><label for="filter" class="sr-only">Filter</label><input type="text" class="form-control" v-model="filter" placeholder="Filter" @keydown="$event.stopImmediatePropagation()"></div></div><label for="calls-count" class="col-xs-6 col-md-4">Process count: </label><output id="calls-count" class="col-xs-6 col-md-4">{{callsCount}}</output><div class="col-xs-12 table-responsive"><datatable :columns="columns" :data="someLongOperation" :filter="filter" name="debounced" :per-page="25"></datatable><datatable-pager v-model="page" table="debounced"></datatable-pager></div></div><div class="row"></div></div>
<a href="#code" id="code" style="color: inherit; text-decoration: none;">
<h2>Code</h2>
</a>
<a href="#typescript" id="typescript" style="color: inherit; text-decoration: none;">
<h3>Typescript</h3>
</a>
<pre><code class="language-ts"><span class="hljs-keyword">import</span> { debounce } <span class="hljs-keyword">from</span> <span class="hljs-string">'lodash'</span>;
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;
<span class="hljs-keyword">import</span> { IDataFnParams, IDisplayHandlerParam, ITableContentParam, TColumnsDefinition, VueDatatable } <span class="hljs-keyword">from</span> <span class="hljs-string">'vuejs-datatable'</span>;
<span class="hljs-keyword">import</span> { IPeople } <span class="hljs-keyword">from</span> <span class="hljs-string">'../utils'</span>;
<span class="hljs-keyword">import</span> { queryApiForData } <span class="hljs-keyword">from</span> <span class="hljs-string">'../utils'</span>;
<span class="hljs-keyword">declare</span> <span class="hljs-keyword">var</span> rows: IPeople[];
<span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> Vue( {
el: <span class="hljs-string">'#demo-app'</span>,
data: {
filter: <span class="hljs-string">''</span>,
columns: [
{ label: <span class="hljs-string">'ID'</span>, field: <span class="hljs-string">'id'</span>, align: <span class="hljs-string">'center'</span>, filterable: <span class="hljs-literal">false</span> },
{ label: <span class="hljs-string">'Username'</span>, field: <span class="hljs-string">'user.username'</span> },
{ label: <span class="hljs-string">'First Name'</span>, field: <span class="hljs-string">'user.first_name'</span> },
{ label: <span class="hljs-string">'Last Name'</span>, field: <span class="hljs-string">'user.last_name'</span> },
{ label: <span class="hljs-string">'Email'</span>, field: <span class="hljs-string">'user.email'</span>, align: <span class="hljs-string">'right'</span>, sortable: <span class="hljs-literal">false</span> },
{ label: <span class="hljs-string">'Address'</span>, representedAs: <span class="hljs-function"><span class="hljs-params">row</span> =></span> <span class="hljs-string">`<span class="hljs-subst">${ row.address }</span>, <span class="hljs-subst">${ row.city }</span>, <span class="hljs-subst">${ row.state }</span>`</span>, align: <span class="hljs-string">'right'</span>, sortable: <span class="hljs-literal">false</span> },
] <span class="hljs-keyword">as</span> TColumnsDefinition<IPeople>,
<span class="hljs-keyword">async</span> someLongOperation( <span class="hljs-keyword">this</span>: VueDatatable<IPeople, <span class="hljs-built_in">any</span>>, params: IDataFnParams<IPeople> ): <span class="hljs-built_in">Promise</span><ITableContentParam<IPeople>> {
<span class="hljs-keyword">this</span>.$root.$data.callsCount++;
<span class="hljs-keyword">const</span> { data, totalRows } = <span class="hljs-keyword">await</span> queryApiForData( params );
<span class="hljs-keyword">return</span> {
rows: data,
totalRowCount: totalRows,
};
},
page: <span class="hljs-number">1</span>,
callsCount: <span class="hljs-number">0</span>,
},
mounted() {
<span class="hljs-keyword">this</span>.$datatables.debounced.processRows = debounce( <span class="hljs-keyword">this</span>.$datatables.debounced.processRows, <span class="hljs-number">1000</span> );
},
} );
</code></pre>
<a href="#html" id="html" style="color: inherit; text-decoration: none;">
<h3>HTML</h3>
</a>
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"demo-app"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xs-12 col-md-4 form-inline"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"filter"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span>></span>Filter<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"filter"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Filter"</span> @<span class="hljs-attr">keydown</span>=<span class="hljs-string">"$event.stopImmediatePropagation()"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"calls-count"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xs-6 col-md-4"</span>></span>Process count: <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">output</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"calls-count"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xs-6 col-md-4"</span>></span>{{callsCount}}<span class="hljs-tag"></<span class="hljs-name">output</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xs-12 table-responsive"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">datatable</span> <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span> <span class="hljs-attr">:data</span>=<span class="hljs-string">"someLongOperation"</span> <span class="hljs-attr">:filter</span>=<span class="hljs-string">"filter"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"debounced"</span> <span class="hljs-attr">:per-page</span>=<span class="hljs-string">"25"</span>></span><span class="hljs-tag"></<span class="hljs-name">datatable</span>></span>
<span class="hljs-tag"><<span class="hljs-name">datatable-pager</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"page"</span> <span class="hljs-attr">table</span>=<span class="hljs-string">"debounced"</span>></span><span class="hljs-tag"></<span class="hljs-name">datatable-pager</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<script src="../assets/js/rows.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js" crossorigin="anonymous" defer></script>
<script src="../assets/js/vuejs-datatable.js" defer></script>
<link rel="stylesheet" href="../assets/css/additional-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script src="../assets/js/tutorials/demo-limit-rows-processing.js" defer></script>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../globals.html"><em>Globals</em></a>
</li>
<li class="current ">
<a href="index.html">Tutorial index</a>
<ul>
<li class=" ">
<a href="bundlers.html">Configuring bundlers & common issues</a>
</li>
<li class=" ">
<a href="basic.html">Basic table</a>
</li>
<li class=" ">
<a href="pager-types.html">Pager types</a>
</li>
<li class=" ">
<a href="ajax/index.html">Ajax table</a>
</li>
<li class=" ">
<a href="customize/index.html">Tables customization</a>
</li>
<li class=" ">
<a href="multiple-tables.html">Multiple tables</a>
</li>
<li class=" ">
<a href="no-pager.html">No pager</a>
</li>
<li class="current ">
<a href="limit-rows-processing.html">Limit rows processing</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
<li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
</body>
</html>
Zerion Mini Shell 1.0