Skip to content

add tagId to inset in columnsearch #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 16, 2023
Merged

add tagId to inset in columnsearch #24

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dab310d
add tagId to inset in columnsearch
Jan 12, 2023
ee6de89
add tagId to insert in columnsearch
Jan 12, 2023
fffb5ea
add config to ajaxtype url request (options: POST, GET, ...)
Jan 16, 2023
d07c793
fix selector for date ti tableId config
Jan 16, 2023
3c83a2b
add options fixedHeader for enable/disable fixed header on scroll page
Jan 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 38 additions & 33 deletions src/Datatable/Datatable.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ class Datatable
//complete callback function
'onCompleteCallback' => null,
'ajaxUrl' => null,
'ajaxType' => 'POST',
'autoWidth' => false,
'tableCss' => [
'width' => '100%',
Expand All @@ -53,8 +54,8 @@ class Datatable
],
'delay' => 3000,
'definitionColumns' => [],

'tableId' => null,
'fixedHeader' => true,
'tableId' => '',
'headers' => [],
'fields' => [],
'headersConfig' => [
Expand Down Expand Up @@ -106,7 +107,7 @@ class Datatable
.columns()
.eq(0)
.each(function (colIdx) {
var cell = $('.filters th').eq(
var cell = $('#:tagId .filters th').eq(
$(api.column(colIdx).header()).index()
);
if (columnsSearch[colIdx] !== undefined) {
Expand All @@ -118,62 +119,62 @@ class Datatable
columnsSearch[colIdx].data.forEach(function (data) {
$(
'select',
$('.filters th').eq($(api.column(colIdx).header()).index())
$('#:tagId .filters th').eq($(api.column(colIdx).header()).index())
).append(
'<option value="' + data.id + '">' + data.name + '</option>'
);
});
$(
'select',
$('.filters th').eq($(api.column(colIdx).header()).index())
$('#:tagId .filters th').eq($(api.column(colIdx).header()).index())
)
.on('change', function () {
let select_value = $(
'select option:selected',
$('.filters th').eq($(api.column(colIdx).header()).index())
$('#:tagId .filters th').eq($(api.column(colIdx).header()).index())
).toArray().map(item => item.value).join();
api.column(colIdx).search(select_value).draw();
});
break;

case 'select' :
case 'select' :
cell.html('<select style="width:100%"><option value=""></option></select>');
columnsSearch[colIdx].data.forEach(function (data) {
$(
'select',
$('.filters th').eq($(api.column(colIdx).header()).index())
$('#:tagId .filters th').eq($(api.column(colIdx).header()).index())
).append(
'<option value="' + data.id + '">' + data.name + '</option>'
);
});
$(
'select',
$('.filters th').eq($(api.column(colIdx).header()).index())
$('#:tagId .filters th').eq($(api.column(colIdx).header()).index())
)
.on('change', function () {
api.column(colIdx).search(this.value).draw();
});
break;

case 'date':
title = cell.data('header') ?? '';
cell.html('<input type="text" id="from' + colIdx + '" class="datepicker" data-provide="datepicker" placeholder="'+ title +'" /><br /><input type="text" class="datepiker" id="to' + colIdx + '" data-provide="datepicker" placeholder="'+ title +'" />')
$('#from'+colIdx)
cell.html('<input type="text" id="from' + colIdx + '" class="from datepicker" data-provide="datepicker" placeholder="'+ title +'" /><br /><input type="text" class="to datepiker" id="to' + colIdx + '" data-provide="datepicker" placeholder="'+ title +'" />')
$('#:tagId').find('#from'+colIdx)
.datepicker()
.on('change', function () {
if($('#to'+colIdx).val() !== '') {
api.column(colIdx).search($('#from' + colIdx).val() + '|' + $('#to' + colIdx).val()).draw();
api.column(colIdx).search($('#:tagId').find('#from'+colIdx).val() + '|' + $('#:tagId').find('#to' + colIdx).val()).draw();
} else {
api.column(colIdx).search($('#from' + colIdx).val() + '|').draw();
api.column(colIdx).search($('#:tagId').find('#from'+colIdx).val() + '|').draw();
}
});
$('#to'+colIdx)
$('#:tagId').find('#to'+colIdx)
.datepicker()
.on('change', function () {
if($('#from'+colIdx).val() !== '') {
api.column(colIdx).search($('#from'+colIdx).val() + '|' + $('#to'+colIdx).val()).draw();
api.column(colIdx).search($('#:tagId').find('#from'+colIdx).val() + '|' + $('#:tagId').find('#to' + colIdx).val()).draw();
} else {
api.column(colIdx).search( '|' + $('#to'+colIdx).val()).draw();
api.column(colIdx).search( '|' + $('#:tagId').find('#to' + colIdx).val()).draw();
}
});
break;
Expand All @@ -183,13 +184,13 @@ class Datatable
cell.html('<input type="text" style="width:100%;" placeholder="'+ title +'" />');
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
$('#:tagId .filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
let action = exeCall;


if(action == null || action == false) {
exeCall = true;
setTimeout(function () {
Expand All @@ -200,25 +201,25 @@ class Datatable
return;
}
}

e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();

var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''?
regexr.replace('{search}',
this.value != ''?
regexr.replace('{search}',
'(((' + this.value + ')))'): '',
this.value != '',
this.value == ''
)
.draw();

$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
Expand All @@ -233,7 +234,7 @@ class Datatable
protected $genericSearchTemplate = <<<GENERIC_SEARCH_CONFIGURATION
$('#:searchInput').on( 'keyup click', function () {
$('#:tagId').DataTable().search(
$('#:searchInput').val()
$('#:searchInput').val()
).draw();
});
GENERIC_SEARCH_CONFIGURATION;
Expand Down Expand Up @@ -262,18 +263,18 @@ class Datatable

// API callback
:getDataMethod

// Generic search
let exeCall = null;
:searchTemplate

:columnSearchTemplate

const dt = $('#:tagId');

dt.DataTable({
orderCellsTop: true,
fixedHeader: true,
fixedHeader: :fixedHeader,
autoWidth: :autoWidth,
ajax: await getData(),
//searching: false,
Expand All @@ -292,8 +293,8 @@ class Datatable
lengthMenu: :lengthMenu,
//@todo add function callback in callback Datatable function
drawCallback: :drawCallback,
//@todo use configuration instead
initComplete: function () {
//@todo use configuration instead
initComplete: function () {
//onComplete
:onCompleteCallback
//column search
Expand Down Expand Up @@ -403,6 +404,7 @@ public function getDatatableScript(): string
[
'searchTypes' => ($this->searchHeadersTypes ?? ''),
'delay' => $this->getConfig('delay') ?? '3000',
'tagId' => $tagId,
]
);

Expand Down Expand Up @@ -436,6 +438,7 @@ public function getDatatableScript(): string
'searchTemplate' => $searchTemplate,
'columnSearchTemplate' => $columnSearchTemplate,
'tagId' => $tagId,
'fixedHeader' => $this->getConfig('fixedHeader') ? 'true' : 'false',
'autoWidth' => $this->getConfig('autoWidth') ? 'true' : 'false',
'pageLength' => $this->getConfig('pageLentgh') ?? '10',
'processing' => $this->getConfig('processing') ? 'true' : 'false',
Expand Down Expand Up @@ -463,6 +466,8 @@ public function setGetDataUrl($defaultUrl = null)
$url = array_merge($url, ['fullBase' => true, '_ext' => 'json']);
$url = $this->Helper->Url->build($url);

$ajaxType = $this->getConfig('ajaxType');

if (!empty($this->getConfig('extraFields'))) {
$extraFields = $this->processExtraFields();
//@todo change to async or anonymous js function
Expand All @@ -484,7 +489,7 @@ public function setGetDataUrl($defaultUrl = null)
let getData = async () => {
return {
url:'{$url}',
type: 'POST',
type: '{$ajaxType}',
}
};
GET_DATA;
Expand Down