Skip to content

change configuration array to put searchInput for columns in definition #14

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 7 commits into from
Jul 15, 2022
Merged

change configuration array to put searchInput for columns in definition #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3cc0db7
change configuration array to put searchInput for columns in definition
Jul 15, 2022
c02ef19
delete setTableTypeSearch que configuration in coluns definition
Jul 15, 2022
edf79a2
timeout 3 seconds
Jul 15, 2022
36f24b9
Merge branch '1.next-cake4' of github.com:VictorOcio/cakephp-datatabl…
Jul 15, 2022
bfa6bf3
fix odatepiker
Jul 15, 2022
9c4ebb9
fix datepicker
Jul 15, 2022
1fd30d4
out console.log
Jul 15, 2022
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
35 changes: 14 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,30 +212,23 @@ Will produce the following script.
});
```

## Setting the table search type.
You can configurate the input search for select or for input.
for configurate this:
```php
$typeOfSearchColumns = [
['type'=> 'select','data' =>[
['id' => '1','name' => '1'],
['id' => '2','name' => '2'],
]
### types of inputs to search in colunms:
Now hava 4 types of inputs:
input
select
select multiple
date

to define the type of search need in definition of columns especificate this array:
```
'searchInput' => [
'type' => '',
'options' => [
['id' => 1, 'name' => 'one'],
],
],
['type' => 'input','data' =>''],
['type' => 'input','data' =>''],
['type' => 'input','data' =>''],
['type' => 'input','data' =>''],
['type' => 'input','data' =>''],
];

$this->Datatable->setTableTypeSearch($typeOfSeachColumns);
```

The limitation only select 1 option, and is need write all fields of search.

A example of this array is:

<div style="width:70%">
<img src="example-search.png" alt="example of search select" />
</div>
Expand Down
1 change: 0 additions & 1 deletion src/Datatables.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,3 @@ public static function postLinkMethods()
];
}
}

59 changes: 27 additions & 32 deletions src/View/Helper/DatatableHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ class DatatableHelper extends Helper

let columnsSearch = :searchTypes;

const execute = null;
// For each column
api
.columns()
Expand Down Expand Up @@ -120,17 +119,18 @@ class DatatableHelper extends Helper
break;

case 'date':
cell.html('<input type="text" id="from' + colIdx + '" placeholder="'+ cell.text() +'" /><br /><input type="text" id="to' + colIdx + '" placeholder="'+ cell.text() +'" />')
$('#from'+colIdx).datepicker()
cell.html('<input type="text" id="from' + colIdx + '" class="datepicker" data-provide="datepicker" placeholder="'+ cell.text() +'" /><br /><input type="text" class="datepiker" id="to' + colIdx + '" data-provide="datepicker" placeholder="'+ cell.text() +'" />')
$('#from'+colIdx)
.datepicker()
.on('change', function () {
if($('#to'+colIdx).val() !== '') {
api.column(colIdx).search($('#from' + colIdx).val() + '|' + $('#to' + colIdx).val()).draw();
} else {
api.column(colIdx).search($('#from' + colIdx).val() + '|').draw();
}
});
$('#to'+colIdx).datepicker()

$('#to'+colIdx)
.datepicker()
.on('change', function () {
if($('#from'+colIdx).val() !== '') {
api.column(colIdx).search($('#from'+colIdx).val() + '|' + $('#to'+colIdx).val()).draw();
Expand All @@ -150,17 +150,20 @@ class DatatableHelper extends Helper
)
.off('keyup change')
.on('keyup change', function (e) {
let action = execute;
let action = exeCall;


if(action == null || action == false) {
let execute = true;
exeCall = true;
setTimeout(function () {
let execute = false;
exeCall = false;
}, :delay);
} else {
if(action == true) {
return;
}
}

e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
Expand Down Expand Up @@ -215,6 +218,7 @@ class DatatableHelper extends Helper
:getDataMethod

// Generic search
let exeCall = null;
:searchTemplate

// Datatables configuration
Expand All @@ -223,7 +227,8 @@ class DatatableHelper extends Helper
:columnSearchTemplate

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



dt.DataTable({
orderCellsTop: true,
fixedHeader: true,
Expand Down Expand Up @@ -524,8 +529,9 @@ protected function processColumnTypeSearch()
$this->searchHeadersTypes = $this->getConfig('searchHeadersTypes');
}
if ($this->searchHeadersTypes === null || $this->searchHeadersTypes == []) {
$this->searchHeadersTypes = $this->fillDefaulTypes($this->dataKeys);
$this->searchHeadersTypes = $this->fillTypes($this->dataKeys);
}

$rows = [];
foreach ($this->searchHeadersTypes as $definition) {
$parts = [];
Expand Down Expand Up @@ -701,25 +707,6 @@ public function getTableHeaders(
return $this->Html->tableHeaders($tableHeaders, $headersAttrsTr, $headersAttrsTh);
}

/**
* Put Definition of types of search in headers
*
* @param array|null $tableSearchHeaders - array of search headers
* @return void
*/
public function setTableTypeSearch(?array $tableSearchHeaders = null): void
{
$defaultTypeSearch = $this->fillDefaulTypes($this->dataKeys);
if ($tableSearchHeaders === null) {
$this->searchHeadersTypes = $defaultTypeSearch;
} elseif (count($tableSearchHeaders) !== count($this->dataKeys)) {
$this->searchHeadersTypes = $tableSearchHeaders + $defaultTypeSearch;
ksort($this->searchHeadersTypes);
} else {
$this->searchHeadersTypes = $tableSearchHeaders;
}
}

/**
* Get variable with type of search in headers
*
Expand All @@ -736,14 +723,22 @@ public function getSearchHedadersTypes()
* @param array $datakeys Number of columns in searchable columns
* @return array
*/
protected function fillDefaulTypes(array $datakeys): array
protected function fillTypes(array $datakeys): array
{
$searchTypes = [];
foreach ($datakeys as $key) {
foreach ($datakeys as $name => $key) {

if (isset($key['searchable']) && $key['searchable'] == 'false') {
$searchTypes[] = [];
} else {
$searchTypes[] = ['type' => 'input', 'data' => []];
if (isset($key['searchInput'])) {
$searchTypes[] = [
'type' => $key['searchInput']['type'],
'data' => (isset($key['searchInput']['options'])?$key['searchInput']['options']:[]),
];
} else {
$searchTypes[] = ['type' => 'input', 'data' => []];
}
}
}

Expand Down