bbs/clrghouz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some datatables consistency

Browse Source
This commit is contained in:
Deon George 2021-08-14 11:11:20 +10:00
parent 385290d18c
commit 6db826c8a4
10 changed files with 373 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
public/plugin/dataTables/dataTables.conditionalPaging.js vendored Normal file
View File

@ -0,0 +1,82 @@
/**
* @summary ConditionalPaging
* @description Hide paging controls when the amount of pages is <= 1
* @version 1.0.0
* @file dataTables.conditionalPaging.js
* @author Matthew Hasbach (https://github.com/mjhasbach)
* @contact hasbach.git@gmail.com
* @copyright Copyright 2015 Matthew Hasbach
*
* License MIT - http://datatables.net/license/mit
*
* This feature plugin for DataTables hides paging controls when the amount
* of pages is <= 1. The controls can either appear / disappear or fade in / out
*
* @example
* $('#myTable').DataTable({
* conditionalPaging: true
* });
*
* @example
* $('#myTable').DataTable({
* conditionalPaging: {
* style: 'fade',
* speed: 500 // optional
* }
* });
*/
(function(window, document, $) {
$(document).on('init.dt', function(e, dtSettings) {
if ( e.namespace !== 'dt' ) {
return;
}
var options = dtSettings.oInit.conditionalPaging || $.fn.dataTable.defaults.conditionalPaging;
if ($.isPlainObject(options) || options === true) {
var config = $.isPlainObject(options) ? options : {},
api = new $.fn.dataTable.Api(dtSettings),
speed = 'slow',
conditionalPaging = function(e) {
var $paging = $(api.table().container()).find('div.dataTables_paginate'),
pages = api.page.info().pages;
if (e instanceof $.Event) {
if (pages <= 1) {
if (config.style === 'fade') {
$paging.stop().fadeTo(speed, 0);
}
else {
$paging.css('visibility', 'hidden');
}
}
else {
if (config.style === 'fade') {
$paging.stop().fadeTo(speed, 1);
}
else {
$paging.css('visibility', '');
}
}
}
else if (pages <= 1) {
if (config.style === 'fade') {
$paging.css('opacity', 0);
}
else {
$paging.css('visibility', 'hidden');
}
}
};
if ( config.speed !== undefined ) {
speed = config.speed;
}
conditionalPaging();
api.on('draw.dt', conditionalPaging);
}
});
})(window, document, jQuery);

37
resources/views/domain/home.blade.php
View File

@ -10,12 +10,12 @@
<p>In FTN network addresses, a domain is the 5th dimension and used when a system supports 5D addressing, ie: zone:net/node.point@<strong class="highlight">domain</strong>.</p>
<p>Domains are used with zones to uniquely identify a FTN network.</p>
<p><small>Some legacy Fidonet software is not 5D aware and may behave unexpectedly when a domain is used</small></p>
<p>This system is aware of the following domains @can('admin',(new \App\Models\Domain))(you can <a href="{{ url('ftn/domain/addedit') }}">add</a> more)@endcan:</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p>This system is aware of the following domains:</p>
<div class="col-9">
@if (\App\Models\Domain::count() == 0)
@can('admin',(new \App\Models\Domain))
@ -24,7 +24,7 @@
<p class="pad">There are no domains - you need to ask an admin to create one for you.</p>
@endcan
@else
<table class="table monotable">
<table class="table monotable" id="domain">
<thead>
<tr>
<th>ID</th>
@ -36,11 +36,6 @@
</thead>
<tbody>
@can('admin',(new \App\Models\Domain))
<tr>
<td colspan="5"><a href="{{ url('ftn/domain/addedit') }}">Add New Domain</a></td>
</tr>
@endcan
@foreach (\App\Models\Domain::orderBy('name')->with(['zones'])->get() as $oo)
<tr>
<td><a href="{{ url('ftn/domain/addedit',[$oo->id]) }}">{{ $oo->id }}</a></td>
@ -58,12 +53,38 @@
@endsection
@section('page-scripts')
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
$('#domain').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
conditionalPaging: {
style: 'fade',
speed: 500
},
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
}
});
});
</script>
@append

64
resources/views/domain/view.blade.php
View File

@ -28,7 +28,7 @@
<div class="accordion-body">
@if($o->echoareas->count())
<p>This network provides the following Echomail areas:</p>
<table class="table monotable w-100" id="network">
<table class="table monotable w-100" id="echoarea">
<thead>
<tr>
<th colspan="3"></th>
@ -72,7 +72,7 @@
<div class="accordion-body">
@if($o->fileareas->count())
<p>This network provides the following File areas:</p>
<table class="table monotable" id="network">
<table class="table monotable" id="filearea">
<thead>
<tr>
<th>Filearea</th>
@ -105,7 +105,7 @@
<div id="collapse_systems" class="accordion-collapse collapse" aria-labelledby="systems" data-bs-parent="#accordion_homepage">
<div class="accordion-body">
<p>The following systems are members of this network.</p>
<table class="table monotable" id="network">
<table class="table monotable" id="system">
<thead>
<tr>
<th>System</th>
@ -162,26 +162,60 @@
@endsection
@section('page-scripts')
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen" >
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
if (href)
window.location = href;
});
$('#network').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
$('#echoarea').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
conditionalPaging: {
style: 'fade',
speed: 500 // optional
}
});
$('#filearea').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
conditionalPaging: {
style: 'fade',
speed: 500 // optional
}
});
$('#system').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
conditionalPaging: {
style: 'fade',
speed: 500 // optional
},
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
}
});
});
</script>
@append

55
resources/views/echoarea/home.blade.php
View File

@ -14,7 +14,7 @@
<div class="row">
<div class="col-6">
<p>This system is aware of the following echoareas:</p>
<p>This system is aware of the following echoareas @can('admin',(new \App\Models\Echoarea))(you can <a href="{{ url('ftn/echoarea/addedit') }}">add</a> more)@endcan:</p>
@if (\App\Models\Echoarea::count() == 0)
@can('admin',(new \App\Models\Echoarea))
@ -23,7 +23,7 @@
<p class="pad">There are no echoareas - you need to ask an admin to create one for you.</p>
@endcan
@else
<table class="table monotable">
<table class="table monotable" id="echoarea">
<thead>
<tr>
<th>ID</th>
@ -35,11 +35,6 @@
</thead>
<tbody>
@can('admin',(new \App\Models\Echoarea))
<tr>
<td colspan="5"><a href="{{ url('ftn/echoarea/addedit') }}">Add New Echoarea</a></td>
</tr>
@endcan
@foreach (\App\Models\Echoarea::orderBy('name')->with(['domain'])->get() as $oo)
<tr>
<td><a href="{{ url('ftn/echoarea/addedit',[$oo->id]) }}">{{ $oo->id }}</a></td>
@ -57,12 +52,48 @@
@endsection
@section('page-scripts')
<script type="text/javascript">
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
if (href)
window.location = href;
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
$('#echoarea').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
conditionalPaging: {
style: 'fade',
speed: 500
},
rowGroup: {
dataSrc: [4],
},
columnDefs: [
{
targets: [4],
visible: false,
},
],
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
}
});
});
</script>
@append

55
resources/views/filearea/home.blade.php
View File

@ -14,7 +14,7 @@
<div class="row">
<div class="col-6">
<p>This system is aware of the following fileareas:</p>
<p>This system is aware of the following fileareas @can('admin',(new \App\Models\Filearea))(you can <a href="{{ url('ftn/filearea/addedit') }}">add</a> more)@endcan:</p>
@if (\App\Models\Filearea::count() == 0)
@can('admin',(new \App\Models\Filearea))
@ -23,7 +23,7 @@
<p class="pad">There are no fileareas - you need to ask an admin to create one for you.</p>
@endcan
@else
<table class="table monotable">
<table class="table monotable" id="filearea">
<thead>
<tr>
<th>ID</th>
@ -35,11 +35,6 @@
</thead>
<tbody>
@can('admin',(new \App\Models\Filearea))
<tr>
<td colspan="5"><a href="{{ url('ftn/filearea/addedit') }}">Add New Filearea</a></td>
</tr>
@endcan
@foreach (\App\Models\Filearea::orderBy('name')->with(['domain'])->get() as $oo)
<tr>
<td><a href="{{ url('ftn/filearea/addedit',[$oo->id]) }}">{{ $oo->id }}</a></td>
@ -57,12 +52,48 @@
@endsection
@section('page-scripts')
<script type="text/javascript">
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
if (href)
window.location = href;
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
$('#filearea').DataTable({
paging: true,
pageLength: 25,
searching: true,
order: [],
conditionalPaging: {
style: 'fade',
speed: 500
},
rowGroup: {
dataSrc: [4],
},
columnDefs: [
{
targets: [4],
visible: false,
},
],
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
}
});
});
</script>
@append

2
resources/views/layouts/partials/sidebar.blade.php
View File

@ -18,7 +18,7 @@
@can('admin')
<dl>
<dt>Users</dt>
<dd><a href="{{ url('user/addedit') }}" >Create</a></dd>
<dd><a href="{{ url('user/addedit') }}">Create</a></dd>
<dd><a href="{{ url('user/list') }}">List</a></dd>
</dl>
@endcan

56
resources/views/system/home.blade.php
View File

@ -13,7 +13,7 @@
<div class="row">
<div class="col-12">
<p>This system is aware of the following systems:</p>
<p>This system is aware of the following systems @can('admin',(new \App\Models\System))(you can <a href="{{ url('ftn/system/addedit') }}">add</a> more)@endcan:</p>
@if (\App\Models\System::count() == 0)
@can('admin',(new \App\Models\System))
@ -22,11 +22,7 @@
<p class="pad">There are no systems - you need to ask an admin to create one for you.</p>
@endcan
@else
@can('admin',(new \App\Models\System))
<p>You can <a href="{{ url('ftn/system/addedit') }}">Add New System</a>.</p>
@endcan
<table class="table monotable" id="systems">
<table class="table monotable" id="system">
<thead>
<tr>
<th>ID</th>
@ -66,32 +62,44 @@
@endsection
@section('page-scripts')
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen" >
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
if (href)
window.location = href;
});
$('#systems').DataTable({
paging: true,
pageLength: 25,
searching: true,
autoWidth: false,
columnDefs: [
{
targets: [5,6],
visible: false,
}
],
$('#system').DataTable({
paging: true,
pageLength: 25,
searching: true,
autoWidth: false,
conditionalPaging: {
style: 'fade',
speed: 500 // optional
},
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
},
columnDefs: [
{
targets: [5,6],
visible: false,
}
],
});
});
</script>
@append

63
resources/views/system/ours.blade.php
View File

@ -13,7 +13,7 @@
@else
<p>These BBS systems are configured here.</p>
<table class="table monotable" id="systems">
<table class="table monotable" id="system">
<thead>
<tr>
<th>Domain</th>
@ -36,7 +36,7 @@
<td>{{ $oo->system->sysop }}</td>
<td>{{ $oo->system->location }}</td>
<td>{{ $oo->system->last_session ? $oo->system->last_session->format('Y-m-d H:i') : '-' }}</td>
<td>{{ join(',',$oo->system->addresses->where('zone_id',$oo->zone_id)->pluck('ftn')->toArray()) }}</td>
<td>{{ $oo->system->addresses->where('zone_id',$oo->zone_id)->pluck('ftn4d')->join(', ') }}</td>
<td>{{ $oo->system->zt_id }}</td>
</tr>
@endforeach
@ -48,39 +48,52 @@
@endsection
@section('page-scripts')
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen" >
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
if (href)
window.location = href;
});
$('#systems').DataTable({
paging: true,
pageLength: 25,
searching: true,
autoWidth: false,
order: [
[0,'asc'],
[2,'asc']
],
rowGroup: {
dataSrc: [0],
},
columnDefs: [
{
targets: [0],
visible: false,
$('#system').DataTable({
paging: true,
pageLength: 25,
searching: true,
autoWidth: false,
order: [
[0,'asc'],
[2,'asc']
],
rowGroup: {
dataSrc: [0],
},
],
columnDefs: [
{
targets: [0],
visible: false,
},
],
conditionalPaging: {
style: 'fade',
speed: 500 // optional
},
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
},
});
});
</script>
@append

51
resources/views/user/home.blade.php
View File

@ -5,9 +5,15 @@
@section('content')
<div class="row">
<div class="row">
<div class="col-9">
<h2>System Users</h2>
</div>
</div>
<div class="col-9">
<p>Current Users:</p>
<table class="table monotable">
<p>This system is aware of the following users @can('admin',(new \App\Models\User))(you can <a href="{{ url('user/addedit') }}">add</a> more)@endcan:</p>
<table class="table monotable" id="user">
<thead>
<tr>
<th>ID</th>
@ -20,11 +26,6 @@
</thead>
<tbody>
@can('admin',(new \App\Models\User))
<tr>
<td colspan="6"><a href="{{ url('user/addedit') }}">Add New User</a></td>
</tr>
@endcan
@foreach (\App\Models\User::orderBy('email')->cursor() as $oo)
<tr class="{{ $oo->admin ? 'admin' : '' }}">
<td><a href="{{ url('user/addedit',[$oo->id]) }}">{{ $oo->id }}</a></td>
@ -42,12 +43,38 @@
@endsection
@section('page-scripts')
<script type="text/javascript">
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
if (href)
window.location = href;
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table tr').click(function() {
var href = $(this).find('a').attr('href');
if (href)
window.location = href;
});
$('#user').DataTable({
paging: true,
pageLength: 25,
searching: true,
autoWidth: false,
conditionalPaging: {
style: 'fade',
speed: 500 // optional
},
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
},
});
});
</script>
@append

39
resources/views/zone/home.blade.php
View File

@ -10,13 +10,12 @@
<p>In FTN network addresses, a zone is the 3rd dimension and used when a system supports 3D (or better) addressing, ie: <strong class="highlight">zone</strong>:net/node.point@domain.</p>
<p>Zones are used with domains to uniquely identify a FTN network. Within an FTN network there can be multiple zones with the same domain.</p>
<p>It is rare that a domain has multiple zones - unless it grows quite large. Zones can also be used to group systems into a common boundary.</p>
<p>This system is aware of the following zones in each domain @can('admin',(new \App\Models\Zone))(you can <a href="{{ url('ftn/zone/addedit') }}">add</a> more)@endcan:</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p>This system is aware of the following zones in each domain:</p>
@if (\App\Models\Zone::count() == 0)
@can('admin',(new \App\Models\Zone))
<p>There are no zones setup, to <a href="{{ url('ftn/zone/addedit') }}">set up your first</a>.</p>
@ -24,10 +23,7 @@
<p class="pad">There are no zones - you need to ask an admin to create one for you.</p>
@endcan
@else
@can('admin',(new \App\Models\Domain))
<p>You can <a href="{{ url('ftn/zone/addedit') }}">Add New Zone</a>.</p>
@endcan
<table class="table monotable" id="zones">
<table class="table monotable" id="zone">
<thead>
<tr>
<th>Domain</th>
@ -54,15 +50,11 @@
@endsection
@section('page-scripts')
{{--
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.min.css" media="screen">
--}}
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen" >
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" media="screen">
<link type="text/css" rel="stylesheet" href="{{ asset('plugin/dataTables/dataTables.bootstrap5.css') }}" media="screen">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript" src="{{ asset('plugin/dataTables/dataTables.conditionalPaging.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript">
@ -74,18 +66,21 @@
}
});
$('#zones').DataTable({
paging: false,
$('#zone').DataTable({
paging: true,
pageLength: 25,
searching: true,
rowGroup: {
dataSrc: [0],
autoWidth: false,
conditionalPaging: {
style: 'fade',
speed: 500 // optional
},
columnDefs: [
{
targets: [0],
visible: false,
},
],
language: {
paginate: {
previous: '&lt;&lt;',
next: '&gt;&gt;'
}
}
});
});
</script>