mirror of
https://github.com/DataTables/DataTables.git
synced 2025-02-20 18:54:15 +01:00
dev minor updates to examples docs
This commit is contained in:
parent
c4dd1136fb
commit
5bf38afa28
@ -1 +1 @@
|
||||
17832e332eb67434470f83095787037d875da072
|
||||
b38b35bf798158a6599359c2a068ab5d2658f3df
|
||||
|
@ -46,14 +46,14 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Add rows</span></h1>
|
||||
<div class="info">
|
||||
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
|
||||
Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
|
||||
method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
|
||||
<p>New rows can be added to a DataTable using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows can
|
||||
be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a> method (note the
|
||||
plural). Data can likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
|
||||
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
|
||||
"DataTables API method">row().remove()</code></a> methods.</p>
|
||||
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
|
||||
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p>
|
||||
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
||||
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
|
||||
DataTable.</p>
|
||||
|
@ -56,10 +56,10 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
|
||||
<div class="info">
|
||||
<p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
|
||||
global, and you may wish to present controls to search on specific columns only.</p>
|
||||
<p>The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may
|
||||
wish to present controls that search on specific columns.</p>
|
||||
<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
|
||||
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
|
||||
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>, since <a href=
|
||||
"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
|
||||
<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
|
||||
to be presented to the user.</p>
|
||||
|
@ -89,8 +89,8 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
|
||||
<div class="info">
|
||||
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
|
||||
information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
<p>The DataTables API has a number of methods for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information
|
||||
about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
|
||||
methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
|
||||
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
|
||||
|
@ -38,12 +38,12 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
|
||||
<div class="info">
|
||||
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
|
||||
remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
|
||||
"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
|
||||
selected rows, but much more complex interactions can easily be developed.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
<p>It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table
|
||||
rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title="DataTables API method">rows().data()</code></a> method can then be used
|
||||
to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be
|
||||
developed.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
|
||||
an API that is fully integrated with DataTables for selecting rows and acting upon that secletion.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<button id="button">Row count</button>
|
||||
|
@ -44,15 +44,14 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
|
||||
row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
|
||||
the row to be selected.</p>
|
||||
<p>This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has
|
||||
a selected class, and if so removing it, but if not then the class is removed from all other rows in the table and then applied to the row being selected.</p>
|
||||
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
|
||||
will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
|
||||
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
|
||||
deletes a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method with
|
||||
<code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
|
||||
reset to the first page).</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
|
||||
an API that is fully integrated with DataTables for selecting rows and acting upon that selection.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<button id="button">Delete selected row</button>
|
||||
|
@ -45,12 +45,12 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
|
||||
"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
|
||||
enabled with this API method, although that is not required for the API function to work.</p>
|
||||
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
|
||||
title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
|
||||
enabled with this API method, although it's not required for the API function to work.</p>
|
||||
<p>In addition, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api" title=
|
||||
"DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
|
||||
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
|
||||
<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
|
||||
for DataTables</a> provides a comprehensive module for column visibility control.</p>
|
||||
<p>If you are looking for a more complete column visibility interaction controls, the <a href="https://datatables.net/extras/buttons">Buttons extension for
|
||||
DataTables</a> provides a comprehensive module for column visibility control.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<div>
|
||||
|
2
media/js/jquery.dataTables.js
vendored
2
media/js/jquery.dataTables.js
vendored
@ -1357,7 +1357,7 @@
|
||||
// - Ƀ - Bitcoin
|
||||
// - Ξ - Ethereum
|
||||
// standards as thousands separators.
|
||||
var _re_formatted_numeric = /[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfkɃΞ]/gi;
|
||||
var _re_formatted_numeric = /[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfk]ɃΞ/gi;
|
||||
|
||||
|
||||
var _empty = function ( d ) {
|
||||
|
2
media/js/jquery.dataTables.min.js
vendored
2
media/js/jquery.dataTables.min.js
vendored
@ -90,7 +90,7 @@ a);h.extend(true,v,a);ga(p)},error:function(){ga(p)}}),m=!0);null===g.asStripeCl
|
||||
j=0;for(i=t.length;j<i;j++)Da(p,e?e[j]:null);hb(p,g.aoColumnDefs,t,function(a,b){ja(p,a,b)});if(x.length){var w=function(a,b){return a.getAttribute("data-"+b)!==null?b:null};h(x[0]).children("th, td").each(function(a,b){var c=p.aoColumns[a];if(c.mData===a){var d=w(b,"sort")||w(b,"order"),e=w(b,"filter")||w(b,"search");if(d!==null||e!==null){c.mData={_:a+".display",sort:d!==null?a+".@data-"+d:k,type:d!==null?a+".@data-"+d:k,filter:e!==null?a+".@data-"+e:k};ja(p,a)}}})}var T=p.oFeatures,e=function(){if(g.aaSorting===
|
||||
k){var a=p.aaSorting;j=0;for(i=a.length;j<i;j++)a[j][1]=p.aoColumns[j].asSorting[0]}wa(p);T.bSort&&z(p,"aoDrawCallback",function(){if(p.bSorted){var a=V(p),b={};h.each(a,function(a,c){b[c.src]=c.dir});r(p,null,"order",[p,a,b]);Hb(p)}});z(p,"aoDrawCallback",function(){(p.bSorted||y(p)==="ssp"||T.bDeferRender)&&wa(p)},"sc");var a=q.children("caption").each(function(){this._captionSide=h(this).css("caption-side")}),b=q.children("thead");b.length===0&&(b=h("<thead/>").appendTo(q));p.nTHead=b[0];b=q.children("tbody");
|
||||
b.length===0&&(b=h("<tbody/>").appendTo(q));p.nTBody=b[0];b=q.children("tfoot");if(b.length===0&&a.length>0&&(p.oScroll.sX!==""||p.oScroll.sY!==""))b=h("<tfoot/>").appendTo(q);if(b.length===0||b.children().length===0)q.addClass(u.sNoFooter);else if(b.length>0){p.nTFoot=b[0];da(p.aoFooter,p.nTFoot)}if(g.aaData)for(j=0;j<g.aaData.length;j++)M(p,g.aaData[j]);else(p.bDeferLoading||y(p)=="dom")&&ma(p,h(p.nTBody).children("tr"));p.aiDisplay=p.aiDisplayMaster.slice();p.bInitialised=true;m===false&&ga(p)};
|
||||
g.bStateSave?(T.bStateSave=!0,z(p,"aoDrawCallback",xa,"state_save"),Ib(p,g,e)):e()}});b=null;return this},x,s,o,u,Xa={},Mb=/[\r\n]/g,Aa=/<.*?>/g,Zb=/^\d{2,4}[\.\/\-]\d{1,2}[\.\/\-]\d{1,2}([T ]{1}\d{1,2}[:\.]\d{2}([\.:]\d{2})?)?$/,$b=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\|\\$|\\^|\\-)","g"),Wa=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfkɃΞ]/gi,L=function(a){return!a||!0===a||"-"===a?!0:!1},Nb=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null},Ob=function(a,b){Xa[b]||
|
||||
g.bStateSave?(T.bStateSave=!0,z(p,"aoDrawCallback",xa,"state_save"),Ib(p,g,e)):e()}});b=null;return this},x,s,o,u,Xa={},Mb=/[\r\n]/g,Aa=/<.*?>/g,Zb=/^\d{2,4}[\.\/\-]\d{1,2}[\.\/\-]\d{1,2}([T ]{1}\d{1,2}[:\.]\d{2}([\.:]\d{2})?)?$/,$b=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\|\\$|\\^|\\-)","g"),Wa=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfk]ɃΞ/gi,L=function(a){return!a||!0===a||"-"===a?!0:!1},Nb=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null},Ob=function(a,b){Xa[b]||
|
||||
(Xa[b]=RegExp(Pa(b),"g"));return"string"===typeof a&&"."!==b?a.replace(/\./g,"").replace(Xa[b],"."):a},Ya=function(a,b,c){var d="string"===typeof a;if(L(a))return!0;b&&d&&(a=Ob(a,b));c&&d&&(a=a.replace(Wa,""));return!isNaN(parseFloat(a))&&isFinite(a)},Pb=function(a,b,c){return L(a)?!0:!(L(a)||"string"===typeof a)?null:Ya(a.replace(Aa,""),b,c)?!0:null},D=function(a,b,c){var d=[],e=0,f=a.length;if(c!==k)for(;e<f;e++)a[e]&&a[e][b]&&d.push(a[e][b][c]);else for(;e<f;e++)a[e]&&d.push(a[e][b]);return d},
|
||||
ia=function(a,b,c,d){var e=[],f=0,g=b.length;if(d!==k)for(;f<g;f++)a[b[f]][c]&&e.push(a[b[f]][c][d]);else for(;f<g;f++)e.push(a[b[f]][c]);return e},W=function(a,b){var c=[],d;b===k?(b=0,d=a):(d=b,b=a);for(var e=b;e<d;e++)c.push(e);return c},Qb=function(a){for(var b=[],c=0,d=a.length;c<d;c++)a[c]&&b.push(a[c]);return b},qa=function(a){var b;a:{if(!(2>a.length)){b=a.slice().sort();for(var c=b[0],d=1,e=b.length;d<e;d++){if(b[d]===c){b=!1;break a}c=b[d]}}b=!0}if(b)return a.slice();b=[];var e=a.length,
|
||||
f,g=0,d=0;a:for(;d<e;d++){c=a[d];for(f=0;f<g;f++)if(b[f]===c)continue a;b.push(c);g++}return b};n.util={throttle:function(a,b){var c=b!==k?b:200,d,e;return function(){var b=this,g=+new Date,j=arguments;d&&g<d+c?(clearTimeout(e),e=setTimeout(function(){d=k;a.apply(b,j)},c)):(d=g,a.apply(b,j))}},escapeRegex:function(a){return a.replace($b,"\\$1")}};var A=function(a,b,c){a[b]!==k&&(a[c]=a[b])},ba=/\[.*?\]$/,U=/\(\)$/,Pa=n.util.escapeRegex,va=h("<div>")[0],Wb=va.textContent!==k,Yb=/<.*?>/g,Na=n.util.throttle,
|
||||
|
Loading…
x
Reference in New Issue
Block a user