Skip to content

Commit 231c374

Browse files
ve3ve3
committed
Update design for DataTables.js to supported version 2.
1 parent 4abaea8 commit 231c374

File tree

3 files changed

+404
-205
lines changed

3 files changed

+404
-205
lines changed

‎_original-source-php/datatables-js.php‎

Lines changed: 10 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
$title = 'DataTables JS by datatables.net';
1212
include 'includes/html-head.php';
1313
?>
14-
<link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
15-
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
14+
<link class="datatables-js" rel="stylesheet" href="//cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css">
15+
<link class="datatables-js" rel="stylesheet" href="//cdn.datatables.net/responsive/3.0.4/css/responsive.dataTables.min.css">
1616
<link rel="stylesheet" href="<?php echo assetUrl('assets/css/rdta/components/rdta-datatables-js.css'); ?>">
1717
</head>
1818
<body>
@@ -23,7 +23,8 @@
2323
<?php echo renderBreadcrumb(['./' => 'Home', '#' => $title], 4); ?>
2424
<div class="rd-page-content page-datatable">
2525
<h1><?php echo $title; ?></h1>
26-
<p>Custom style for <a href="https://datatables.net/" target="datatables">DataTables JS</a>.</p>
26+
<p class="rdta-version-info">(Since v.2.3.0)</p>
27+
<p>Custom style for <a href="https://datatables.net/" target="datatables">DataTables JS</a> version 1, 2.</p>
2728
<p>
2829
In order to make DataTables JS design works, add this file after DataTables's CSS.
2930
<strong>assets/css/rdta/components/rdta-datatables.css</strong>,
@@ -119,7 +120,7 @@
119120
?>
120121
<h3>Row colors</h3>
121122
<p>Add showing class to <code>&lt;tr&gt;</code>.</p>
122-
<table id="rdta-datatables-sample-rowcolors" class="display">
123+
<table id="rdta-datatables-sample-rowcolors" class="display" style="width: 100%;">
123124
<thead>
124125
<tr>
125126
<th>Type</th>
@@ -291,8 +292,7 @@
291292
<pre><code class="language-js"><?php
292293
$sampleJS = <<<EOT
293294
{
294-
'autoWidth': false,// don't set style="width: xxx;" in the table cell.
295-
columnDefs: [
295+
'columnDefs': [
296296
{
297297
'orderable': false,
298298
'searchable': false,
@@ -314,7 +314,7 @@
314314
],
315315
'order': [[1, 'desc']],
316316
'processing': true,
317-
responsive: {
317+
'responsive': {
318318
details: {
319319
type: 'column',
320320
target: -1,
@@ -332,192 +332,8 @@
332332

333333

334334
<?php include 'includes/js-end-body.php'; ?>
335-
<script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
336-
<script src="//cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
337-
<script>
338-
const dtStylesNewTableId = 'rdta-datatables-sample-customstyles';// styles change
339-
let dtStylesTable = null;
340-
341-
342-
/**
343-
* Copy and paste table from sample 1 to placeholder and rename with new ID.
344-
*
345-
* @param {string} placeholderId
346-
* @param {string} newTableId
347-
*/
348-
function copyAndPasteTable(placeholderId, newTableId) {
349-
if (typeof(placeholderId) !== 'string') {
350-
throw Error('The placeholderId must be string.');
351-
}
352-
if (typeof(newTableId) !== 'string') {
353-
throw Error('The newTableId must be string.');
354-
}
355-
356-
// copy and paste table from above.
357-
const tableSample1 = document.getElementById('rdta-datatables-sample1');
358-
let placeholderE = document.getElementById(placeholderId);
359-
placeholderE.innerHTML = '<div class="rd-datatable-wrapper">' + tableSample1.outerHTML + '</div>';
360-
361-
// modify id attribute.
362-
placeholderE.querySelector('table')
363-
?.setAttribute('id', newTableId)
364-
;
365-
}// copyAndPasteTable
366-
367-
368-
/**
369-
* Listen on DataTables styles change.
370-
*
371-
* @returns {undefined}
372-
*/
373-
function listenDtStylesChange() {
374-
document.getElementById('datatables-styles').addEventListener('change', (event) => {
375-
const thisValue = event.target.value;
376-
const tableE = document.getElementById(dtStylesNewTableId);
377-
tableE.className = '';
378-
if (thisValue !== '') {
379-
const selectClasses = thisValue.split(' ');
380-
for (const eachClass of selectClasses) {
381-
if (eachClass.trim() === '') {
382-
continue;
383-
}
384-
tableE.classList.add(eachClass.trim());
385-
}// endfor;
386-
}// endif; value is not empty.
387-
388-
if (dtStylesTable) {
389-
dtStylesTable.destroy();
390-
}
391-
dtStylesTable = new DataTable('#' + dtStylesNewTableId);
392-
});
393-
}// listenDtStylesChange
394-
395-
396-
document.addEventListener('DOMContentLoaded', () => {
397-
const $ = jQuery.noConflict();
398-
new DataTable('#rdta-datatables-sample1');
399-
400-
// JS for work with DataTables with styles selector. --------------------------------
401-
listenDtStylesChange();
402-
// copy and paste table from above.
403-
copyAndPasteTable('rdta-datatables-sample-dt-styles-placeholder', dtStylesNewTableId);
404-
// remove classes.
405-
document.getElementById(dtStylesNewTableId).className = '';
406-
document.getElementById('datatables-styles').dispatchEvent(new Event('change', {'bubbles': true}));
407-
// end JS for work with DataTables with styles selector. ----------------------------
408-
409-
// JS for work with row colors. --------------------------------------------------------
410-
new DataTable('#rdta-datatables-sample-rowcolors', {
411-
'ordering': false,
412-
});
413-
// end JS for work with row colors. ----------------------------------------------------
414-
415-
// JS for work with cell colors. ---------------------------------------------------------
416-
const table = new DataTable('#rdta-datatables-sample-cellcolors', {
417-
'ordering': false,
418-
});
419-
// end JS for work with cell colors. -----------------------------------------------------
420-
421-
// JS for work with individual search/select. -------------------------------------------
422-
// copy and paste table from above.
423-
const indDtNewId = 'rdta-datatables-sample-individual-searchselect';// individual search/select
424-
copyAndPasteTable('rdta-datatables-sample-individual-searchselect-placeholder', indDtNewId);
425-
// add filter to tfoot.
426-
document.querySelectorAll('#' + indDtNewId + ' tfoot th').forEach((item, index) => {
427-
if (index === 0) {
428-
// if first column.
429-
item.innerHTML = '<select><option value=""></option></select>';
430-
return;// skip
431-
}
432-
const title = item.innerText;
433-
item.innerHTML = '<input type="text" placeholder="Search ' + title + '" />';
434-
});
435-
// activate DataTables.
436-
$('#' + indDtNewId).DataTable({
437-
initComplete: function() {// can't use arrow function here, otherwise it will be unable to access the same `this`.
438-
// Apply the search
439-
this.api()
440-
.columns()
441-
.every(function() {// can't use arrow function here, otherwise it will be unable to access the same `this`.
442-
const column = this;
443-
const select = $('select', this.footer());
444-
const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
445-
446-
column
447-
.data()
448-
.unique()
449-
.sort(collator.compare)
450-
.each(function (d, j) {
451-
select.append('<option value="' + d + '">' + d + '</option>');
452-
});
453-
454-
if (select.length > 0) {
455-
select.on('change', (event) => {
456-
const value = event.target.value;
457-
column.search(value ? '^' + value + '$' : '', true, false).draw();
458-
});
459-
}
460-
461-
$('input', this.footer()).on('keyup change clear', function() {// can't use arrow function here, otherwise it will be unable to access the same `this`.
462-
if (column.search() !== this.value) {
463-
column.search(this.value).draw();
464-
}
465-
});
466-
});
467-
},
468-
});// end .DataTable()
469-
// end JS for work with individual search/select. --------------------------------------
470-
471-
// JS for work with responsive. ---------------------------------------------------------
472-
const responsiveDtNewId = 'rdta-datatables-sample-responsive1';
473-
// copy and paste table from above.
474-
copyAndPasteTable('rdta-datatables-sample-responsive-placeholder', responsiveDtNewId);
475-
// modify id attribute.
476-
document.getElementById(responsiveDtNewId)?.classList.add('nowrap');
477-
document.getElementById(responsiveDtNewId).closest('.rd-datatable-wrapper').className = '';
478-
$('#' + responsiveDtNewId).DataTable({
479-
responsive: true
480-
});
481-
// end JS for work with responsive. ----------------------------------------------------
482-
});
483-
484-
485-
document.addEventListener('rdta.viewsource.renderpreview.done', (event) => {
486-
// JS for work with responsive full actions. --------------------------------------------
487-
const responsive2DtId = 'rdta-datatables-sample-responsive2';
488-
jQuery('#' + responsive2DtId).DataTable({
489-
'autoWidth': false,// don't set style="width: xxx;" in the table cell.
490-
columnDefs: [
491-
{
492-
'orderable': false,
493-
'searchable': false,
494-
'targets': [0, -1]
495-
},
496-
{
497-
'className': 'column-checkbox',
498-
'targets': 0,
499-
},
500-
{
501-
'className': 'none',
502-
'targets': 4,
503-
},
504-
{
505-
'className': 'dtr-control',
506-
'orderable': false,
507-
'targets': -1,
508-
},
509-
],
510-
'order': [[1, 'desc']],
511-
'processing': true,
512-
responsive: {
513-
details: {
514-
type: 'column',
515-
target: -1,
516-
},
517-
}
518-
});
519-
// end JS for work with responsive full actions. ---------------------------------------
520-
});
521-
</script>
335+
<script class="datatables-js" src="//cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
336+
<script class="datatables-js" src="//cdn.datatables.net/responsive/3.0.4/js/dataTables.responsive.min.js"></script>
337+
<script src="assets/js-preview/datatables-js.js"></script>
522338
</body>
523339
</html>

0 commit comments

Comments
 (0)