rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-01-30 23:52:11 +01:00
Code Issues Releases Activity

Update - example: Make it easier to change the grouping column in the grouping example (although, RowGroup is really the way forward here)

Browse Source
This commit is contained in:
Allan Jardine 2018-06-14 11:29:43 +01:00
parent 35d84a8785
commit c9759a828a
3 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
ee44561b3bca8f59db3c98b4045bfb5f258b258d
4e496cbed35f8ee88b0122e90edfbb92b656d3b1

26
examples/advanced_init/row_grouping.html
View File

@ -24,18 +24,19 @@ tr.group:hover {
$(document).ready(function() {
var groupColumn = 2;
var table = $('#example').DataTable({
"columnDefs": [
{ "visible": false, "targets": 2 }
{ "visible": false, "targets": groupColumn }
],
"order": [[ 2, 'asc' ]],
"order": [[ groupColumn, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
@ -50,11 +51,11 @@ $(document).ready(function() {
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
table.order( [ groupColumn, 'asc' ] ).draw();
}
} );
} );
@ -570,18 +571,19 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var groupColumn = 2;
var table = $('#example').DataTable({
&quot;columnDefs&quot;: [
{ &quot;visible&quot;: false, &quot;targets&quot;: 2 }
{ &quot;visible&quot;: false, &quot;targets&quot;: groupColumn }
],
&quot;order&quot;: [[ 2, 'asc' ]],
&quot;order&quot;: [[ groupColumn, 'asc' ]],
&quot;displayLength&quot;: 25,
&quot;drawCallback&quot;: function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'&lt;tr class=&quot;group&quot;&gt;&lt;td colspan=&quot;5&quot;&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
@ -596,11 +598,11 @@ $(document).ready(function() {
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
if ( currentOrder[0] === groupColumn &amp;&amp; currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
table.order( [ groupColumn, 'asc' ] ).draw();
}
} );
} );</code>

2
examples/server_side/defer_loading.html
View File

@ -42,7 +42,7 @@ $(document).ready(function() {
to be displayed correctly).</p>
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
data is available and that it should wait for user interaction (ordering, paging etc) before making an Ajax call.</p>
data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">