Skip to content

Commit

Permalink
Update: Example's code to DataTables modern style
Browse files Browse the repository at this point in the history
  • Loading branch information
@AllanJard
AllanJard committed May 24, 2023
1 parent 5265681 commit 8bd7a84
Show file tree
Hide file tree
Showing 17 changed files with 304 additions and 145 deletions.
21 changes: 14 additions & 7 deletions examples/initialisation/alwaysAsk.xml
View file
Expand Up @@ -4,15 +4,22 @@
<css lib="datatables autofill" />
<js lib="jquery datatables autofill">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
autoFill: {
alwaysAsk: true
}
} );
} );
$('#example').DataTable({
autoFill: {
alwaysAsk: true,
},
});
]]>
</js>
<js-vanilla>
<![CDATA[
new DataTable('#example', {
autoFill: {
alwaysAsk: true,
},
});
]]>
</js-vanilla>

<title lib="AutoFill">Always confirm action</title>

Expand Down
50 changes: 36 additions & 14 deletions examples/initialisation/columns.xml
View file
Expand Up @@ -4,26 +4,48 @@
<css lib="datatables autofill select" />
<js lib="jquery datatables autofill select">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
$('#example').DataTable({
autoFill: {
columns: ':not(:first-child)',
},
columnDefs: [
{
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
targets: 0,
},
order: [[ 1, 'asc' ]],
autoFill: {
columns: ':not(:first-child)'
}
} );
} );
],
order: [[1, 'asc']],
select: {
style: 'os',
selector: 'td:first-child',
},
});
]]>
</js>

<js-vanilla>
<![CDATA[
new DataTable('#example', {
autoFill: {
columns: ':not(:first-child)',
},
columnDefs: [
{
orderable: false,
className: 'select-checkbox',
targets: 0,
},
],
order: [[1, 'asc']],
select: {
style: 'os',
selector: 'td:first-child',
},
});
]]>
</js-vanilla>

<title lib="AutoFill">Column selector</title>

<info><![CDATA[
Expand Down
22 changes: 15 additions & 7 deletions examples/initialisation/disableHorizontal.xml
View file
Expand Up @@ -4,16 +4,24 @@
<css lib="datatables autofill" />
<js lib="jquery datatables autofill">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
autoFill: {
horizontal: false
}
} );
} );
$('#example').DataTable({
autoFill: {
horizontal: false,
},
});
]]>
</js>

<js-vanilla>
<![CDATA[
new DataTable('#example', {
autoFill: {
horizontal: false,
},
});
]]>
</js-vanilla>

<title lib="AutoFill">Disable horizontal fill</title>

<info><![CDATA[
Expand Down
68 changes: 46 additions & 22 deletions examples/initialisation/enableDisable.xml
View file
Expand Up @@ -4,32 +4,56 @@
<css lib="datatables autofill buttons" />
<js lib="jquery datatables autofill buttons">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
autoFill: {
enable: false
},
dom: 'Bfrtip',
buttons: [
{
text: "Enable AutoFill",
action: function (e, dt) {
if ( dt.autoFill().enabled() ) {
this.autoFill().disable();
this.text( 'Enable AutoFill' );
}
else {
this.autoFill().enable();
this.text( 'Disable AutoFill' );
}
$('#example').DataTable({
autoFill: {
enable: false,
},
dom: 'Bfrtip',
buttons: [
{
text: 'Enable AutoFill',
action: function (e, dt) {
if (dt.autoFill().enabled()) {
this.autoFill().disable();
this.text('Enable AutoFill');
}
else {
this.autoFill().enable();
this.text('Disable AutoFill');
}
}
]
} );
} );
},
},
],
});
]]>
</js>

<js-vanilla>
<![CDATA[
new DataTable('#example', {
autoFill: {
enable: false,
},
dom: 'Bfrtip',
buttons: [
{
text: 'Enable AutoFill',
action: function (e, dt) {
if (dt.autoFill().enabled()) {
this.autoFill().disable();
this.text('Enable AutoFill');
}
else {
this.autoFill().enable();
this.text('Disable AutoFill');
}
},
},
],
});
]]>
</js-vanilla>

<title lib="AutoFill">Enable / disable API</title>

<info><![CDATA[
Expand Down
28 changes: 19 additions & 9 deletions examples/initialisation/events.xml
View file
Expand Up @@ -4,18 +4,28 @@
<css lib="datatables autofill" />
<js lib="jquery datatables autofill">
<![CDATA[
$(document).ready(function() {
var table = $('#example').DataTable( {
autoFill: true
} );
table.on( 'autoFill', function () {
table.columns.adjust();
} );
} );
var table = $('#example').DataTable({
autoFill: true,
});
table.on('autoFill', function () {
table.columns.adjust();
});
]]>
</js>

<js-vanilla>
<![CDATA[
var table = new DataTable('#example', {
autoFill: true,
});
table.on('autoFill', function () {
table.columns.adjust();
});
]]>
</js-vanilla>

<title lib="AutoFill">Events</title>

<info><![CDATA[
Expand Down
16 changes: 11 additions & 5 deletions examples/initialisation/fills.xml
View file
Expand Up @@ -4,14 +4,20 @@
<css lib="datatables autofill" />
<js lib="jquery datatables autofill">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
autoFill: true
} );
} );
$('#example').DataTable({
autoFill: true,
});
]]>
</js>

<js-vanilla>
<![CDATA[
new DataTable('#example', {
autoFill: true,
});
]]>
</js-vanilla>

<title lib="AutoFill">Fill types</title>

<info><![CDATA[
Expand Down
22 changes: 15 additions & 7 deletions examples/initialisation/focus.xml
View file
Expand Up @@ -4,16 +4,24 @@
<css lib="datatables autofill" />
<js lib="jquery datatables autofill">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
autoFill: {
focus: 'click'
}
} );
} );
$('#example').DataTable({
autoFill: {
focus: true,
},
});
]]>
</js>

<js-vanilla>
<![CDATA[
new DataTable('#example', {
autoFill: {
focus: true,
},
});
]]>
</js-vanilla>

<title lib="AutoFill">Click focus</title>

<info><![CDATA[
Expand Down
19 changes: 13 additions & 6 deletions examples/initialisation/keyTable.xml
View file
Expand Up @@ -4,15 +4,22 @@
<css lib="datatables autofill keytable" />
<js lib="jquery datatables autofill keytable">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
keys: true,
autoFill: true
} );
} );
$('#example').DataTable({
keys: true,
autoFill: true,
});
]]>
</js>

<js-vanilla>
<![CDATA[
new DataTable('#example', {
keys: true,
autoFill: true,
});
]]>
</js-vanilla>

<title lib="AutoFill">KeyTable integration</title>

<info><![CDATA[
Expand Down

0 comments on commit 8bd7a84

Please sign in to comment.