From 0046834b2c908b720232bc683693044936bb1a19 Mon Sep 17 00:00:00 2001 From: acognet Date: Thu, 12 Nov 2020 18:30:20 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B02847=20-=20Tranform=20old=20itop=20datat?= =?UTF-8?q?able=20to=20jquery=20DataTable=20-=20add=20sort?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- application/cmdbabstract.class.inc.php | 1 - js/dataTables.settings.js | 59 +++++----------- pages/ajax.render.php | 18 +++-- pages/ajax.searchform.php | 8 --- .../Component/DataTable/DataTableFactory.php | 68 ++++++++++++++++--- .../components/datatable/layout.html.twig | 4 +- templates/components/datatable/layout.js.twig | 22 +++--- 7 files changed, 100 insertions(+), 80 deletions(-) diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php index 817bd21ec..5edd3b5c0 100644 --- a/application/cmdbabstract.class.inc.php +++ b/application/cmdbabstract.class.inc.php @@ -51,7 +51,6 @@ require_once(APPROOT.'application/ui.linksdirectwidget.class.inc.php'); require_once(APPROOT.'application/ui.passwordwidget.class.inc.php'); require_once(APPROOT.'application/ui.extkeywidget.class.inc.php'); require_once(APPROOT.'application/ui.htmleditorwidget.class.inc.php'); -require_once(APPROOT.'application/datatable.class.inc.php'); require_once(APPROOT.'sources/application/search/searchform.class.inc.php'); require_once(APPROOT.'sources/application/search/criterionparser.class.inc.php'); require_once(APPROOT.'sources/application/search/criterionconversionabstract.class.inc.php'); diff --git a/js/dataTables.settings.js b/js/dataTables.settings.js index 53ff1647c..48a20a30f 100644 --- a/js/dataTables.settings.js +++ b/js/dataTables.settings.js @@ -2,7 +2,7 @@ $(function() { // the widget definition, where "itop" is the namespace, - // "datatable" the widget name + // "DataTableSettings" the widget name $.widget( "itop.DataTableSettings", { // default options @@ -26,7 +26,6 @@ $(function() _create: function(mydatatable, options) { this.aDlgStateParams = ['iDefaultPageSize', 'oColumns']; - console.warn('datatablesettings'); this.element.addClass('itop-datatable'); var me = this; @@ -80,51 +79,32 @@ $(function() { window.pager_params['pager'+me.options.sListId] = undefined; } - // End of workaround - console.warn("update:"); - console.warn(data); // try { - var toto = $('#'+me.options.sListId).parent().parent(); + var parentElt = $('#'+me.options.sListId).parent().parent(); $('#'+me.options.sListId).DataTable().destroy(true); - var entete=""; + var sThead=""; + if(me.options.sSelectMode !=""){ + sThead += ""; + } var aOptions = JSON.parse(data); - $.each(aOptions[0]['allColumns'], function(i, item) { + $.each(aOptions['allColumns'], function(i, item) { $.each(item, function(j, champs) { if(champs.checked == 'true') { - entete += ""+champs.label+""; + sThead += ""+champs.label+""; } }); }); - $.each(aOptions[0]['columns'], function(i, item) { - aOptions[0]["columns"][i]["render"]["display"] = new Function ( "data, type, row" , aOptions[0]["columns"][i]["render"]["display"]); + $.each(aOptions['columns'], function(i, item) { + aOptions["columns"][i]["render"]["display"] = new Function ( "data, type, row" , aOptions["columns"][i]["render"]["display"]); }); - toto.append( "" + - ""+entete+"
" ); - //$('#'+me.options.sListId).DataTable().clear(); - //$('#'+me.options.sListId).empty(); - aOptions[0]["lengthMenu"]= [[oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, -1], [oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, aOptions[0]["lengthMenu"]]]; - aOptions[0]["ajax"]=eval(aOptions[0]["ajax"]); - $('#'+me.options.sListId).DataTable(aOptions[0]); - //me.element.find('.datacontents').html(data); - // restore the sort order on columns - //me.element.find('table.listResults').trigger('fakesorton', [aCurrentSort]); + parentElt.append( "" + + ""+sThead+"
" ); + aOptions["lengthMenu"]= [[oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, -1], [oParams.end, oParams.end*2, oParams.end*3, oParams.end*4, aOptions["lengthMenu"]]]; + aOptions["ajax"]=eval(aOptions["ajax"]); + $('#'+me.options.sListId).DataTable(aOptions); - - - - - - /*} catch (e) { - // ugly hacks for IE 8/9 first... - if (!window.console) console.error = {}; - if (!window.console.error) { - console.error = function () { - }; - } - console.error("Can not inject data : "+data); - }*/ me.element.unblock(); }, 'html' ); @@ -168,11 +148,6 @@ $(function() } } } - /*A voir, je ne sais pas à quoi ça sert - if ((this.options.sSelectMode != '') && (this.options.sSelectMode != 'none')) - { - iSortCol++; - }*/ oParams.sort_col = iSortCol; oParams.sort_order = sSortOrder; var me = this; @@ -202,6 +177,7 @@ $(function() oOptions = {oColumns: oColumns, iPageSize: iPageSize, iDefaultPageSize: iPageSize }; } this._setOptions(oOptions); + this._refresh(); // Check if we need to save the settings or not... var oSaveCheck = $('#datatable_dlg_'+this.options.sListId).find('input[name=save_settings]'); @@ -259,7 +235,6 @@ $(function() { // in 1.9 would use _superApply this._superApply(arguments); - this._refresh(); }, // _setOption is called for each individual option that is changing _setOption: function( key, value ) @@ -269,7 +244,6 @@ $(function() }, UpdateState: function( config ) { - console.warn('datatablesettings:UpdateState'); var iPageSize = config.page_size; if (iPageSize == -1) { @@ -314,6 +288,7 @@ $(function() for(k in this.aDlgStateParams) { this._setOption(this.aDlgStateParams[k], this.originalState[this.aDlgStateParams[k]]); + this._refresh(); } dlgElement.find('input[name=page_size]').val(this.originalState.iDefaultPageSize); diff --git a/pages/ajax.render.php b/pages/ajax.render.php index 283498030..4dd47ee05 100644 --- a/pages/ajax.render.php +++ b/pages/ajax.render.php @@ -291,7 +291,15 @@ try $iEnd = utils::ReadParam('end', 1); $iDrawNumber= utils::ReadParam('draw', 1); - $iSortCol = utils::ReadParam('sort_col', 'null'); + $aSort = utils::ReadParam('order', [], false, 'array'); + if(count($aSort)>0){ + $iSortCol = $aSort[0]["column"]; + $sSortOrder = $aSort[0]["dir"]; + } + else{ + $iSortCol = 0; + $sSortOrder = "asc"; + } $sSelectMode = utils::ReadParam('select_mode', ''); if (!empty($sSelectMode) && ($sSelectMode != 'none')) { @@ -330,16 +338,16 @@ try if ($aNameSpec[0] == '%1$s') { // The name is made of a single column, let's sort according to the sort algorithm for this column - $aOrderBy[$sAlias.'.'.$aNameSpec[1][0]] = (utils::ReadParam('sort_order', 'asc') == 'asc'); + $aOrderBy[$sAlias.'.'.$aNameSpec[1][0]] = ($sSortOrder == 'asc'); } else { - $aOrderBy[$sAlias.'.'.'friendlyname'] = (utils::ReadParam('sort_order', 'asc') == 'asc'); + $aOrderBy[$sAlias.'.'.'friendlyname'] = ($sSortOrder == 'asc'); } } else { - $aOrderBy[$sAlias.'.'.'friendlyname'] = (utils::ReadParam('sort_order', 'asc') == 'asc'); + $aOrderBy[$sAlias.'.'.'friendlyname'] = ($sSortOrder == 'asc'); } } } @@ -365,7 +373,7 @@ try { $sSortCol = $sAttCode; } - $aOrderBy[$sAlias.'.'.$sSortCol] = (utils::ReadParam('sort_order', 'asc') == 'asc'); + $aOrderBy[$sAlias.'.'.$sSortCol] = ($sSortOrder == 'asc'); } } $iSortIndex++; diff --git a/pages/ajax.searchform.php b/pages/ajax.searchform.php index a58e664dc..ec55101e9 100644 --- a/pages/ajax.searchform.php +++ b/pages/ajax.searchform.php @@ -64,8 +64,6 @@ try $sHiddenCriteria = ''; } $oFilter = CriterionParser::Parse($aParams['base_oql'], $aParams['criterion'], $sHiddenCriteria); - - //IssueLog::Info('Search OQL: "'.$oFilter->ToOQL().'"'); $oDisplayBlock = new DisplayBlock($oFilter, 'list_search', false); foreach($aListParams as $key => $value) @@ -92,11 +90,6 @@ try { $aExtraParams['query_params'] = array('this->object()' => $oObj); } - -// // Current extkey value, so we can display event if it is not available anymore (eg. archived). -// $iCurrentExtKeyId = (is_null($oObj)) ? 0 : $oObj->Get($this->sAttCode); -// $aExtraParams['current_extkey_id'] = $iCurrentExtKeyId; - } if (!isset($aExtraParams['update_history'])) @@ -116,7 +109,6 @@ try $oDisplayBlock->RenderContent($oPage, $aExtraParams); } - if (isset($aListParams['debug']) || UserRights::IsAdministrator()) { $oPage->StartCollapsibleSection(Dict::S('UI:RunQuery:MoreInfo'), false, 'SearchQuery'); diff --git a/sources/application/UI/Component/DataTable/DataTableFactory.php b/sources/application/UI/Component/DataTable/DataTableFactory.php index de64d3026..3bf441f97 100644 --- a/sources/application/UI/Component/DataTable/DataTableFactory.php +++ b/sources/application/UI/Component/DataTable/DataTableFactory.php @@ -240,7 +240,6 @@ class DataTableFactory if ($oCustomSettings->iDefaultPageSize > 0) { $oSet->SetLimit($oCustomSettings->iDefaultPageSize); } - $oSet->SetOrderBy($oCustomSettings->GetSortOrder()); // Load only the requested columns $aColumnsToLoad = array(); @@ -261,10 +260,20 @@ class DataTableFactory } } $oSet->OptimizeColumnLoad($aColumnsToLoad); - + $aSortOrder=[]; + $aSortDatable=[]; $aColumnDefinition = []; + $iIndexColumn=0; + if($sSelectMode!="") { + $iIndexColumn++; + } foreach ($aClassAliases as $sClassAlias => $sClassName) { foreach ($oCustomSettings->aColumns[$sClassAlias] as $sAttCode => $aData) { + if ($aData['sort'] != 'none') { + $sCode = ($aData['code'] == '_key_') ? 'friendlyname' : $aData['code']; + $aSortOrder[$sAlias.$sCode] = ($aData['sort'] == 'asc'); // true for ascending, false for descending + $aSortDatable=[$iIndexColumn,$aData['sort']]; + } if ($aData['checked']) { if ($sAttCode == '_key_') { $aColumnDefinition[] = [ @@ -290,20 +299,22 @@ class DataTableFactory "render" => $oAttDef->GetRenderForDataTable($sClassAlias), ]; } + $iIndexColumn++; } } } + $oSet->SetOrderBy($aSortOrder); $aOptions = []; if ($oDefaultSettings != null) { $aOptions['oDefaultSettings'] = json_encode(array('iDefaultPageSize' => $oDefaultSettings->iDefaultPageSize, 'oColumns' => $oDefaultSettings->aColumns)); } - + $aOptions['sort'] = $aSortDatable; if ($sSelectMode == 'multiple') { - $aOptions['select'] = "multi"; + $aOptions['select_mode'] = "multiple"; } else { if ($sSelectMode == 'single') { - $aOptions['select'] = "single"; + $aOptions['select_mode'] = "single"; } } @@ -324,6 +335,7 @@ class DataTableFactory "columns" => $oCustomSettings->aColumns, "extra_params" => $aExtraParams, "class_aliases" => $aClassAliases, + "select_mode" => $sSelectMode, ])); $oDataTable->SetDisplayColumns($aColumnDefinition); $oDataTable->SetResultColumns($oCustomSettings->aColumns); @@ -436,7 +448,6 @@ class DataTableFactory if ($oCustomSettings->iDefaultPageSize > 0) { $oSet->SetLimit($oCustomSettings->iDefaultPageSize); } - $oSet->SetOrderBy($oCustomSettings->GetSortOrder()); // Load only the requested columns $aColumnsToLoad = array(); @@ -459,8 +470,17 @@ class DataTableFactory $oSet->OptimizeColumnLoad($aColumnsToLoad); $aColumnDefinition = []; + $iIndexColumn=0; + if($sSelectMode!="") { + $iIndexColumn++; + } foreach ($aClassAliases as $sClassAlias => $sClassName) { foreach ($oCustomSettings->aColumns[$sClassAlias] as $sAttCode => $aData) { + if ($aData['sort'] != 'none') { + $sCode = ($aData['code'] == '_key_') ? 'friendlyname' : $aData['code']; + $aSortOrder[$sAlias.$sCode] = ($aData['sort'] == 'asc'); // true for ascending, false for descending + $aSortDatable=[$iIndexColumn,$aData['sort']]; + } if ($aData['checked']) { if ($sAttCode == '_key_') { $aColumnDefinition[] = [ @@ -486,9 +506,11 @@ class DataTableFactory "render" => $oAttDef->GetRenderForDataTable($sClassAlias), ]; } + $iIndexColumn++; } } } + $oSet->SetOrderBy($oCustomSettings->GetSortOrder()); $aOptions = []; if ($oDefaultSettings != null) { @@ -496,13 +518,15 @@ class DataTableFactory } if ($sSelectMode == 'multiple') { - $aOptions['select'] = "multi"; + $aOptions['select_mode'] = "multiple"; } else { if ($sSelectMode == 'single') { - $aOptions['select'] = "single"; + $aOptions['select_mode'] = "single"; } } + $aOptions['sort'] = $aSortDatable; + $aOptions['iPageSize'] = 10; if ($oCustomSettings->iDefaultPageSize > 0) { $aOptions['iPageSize'] = $oCustomSettings->iDefaultPageSize; @@ -520,6 +544,7 @@ class DataTableFactory "columns" => $oCustomSettings->aColumns, "extra_params" => $aExtraParams, "class_aliases" => $aClassAliases, + "select_mode" => $sSelectMode, ])); $oDataTable->SetDisplayColumns($aColumnDefinition); $oDataTable->SetResultColumns($oCustomSettings->aColumns); @@ -545,6 +570,25 @@ class DataTableFactory $aColumnDefinition = []; $aClassAliases = []; + if ($sSelectMode!=""){ + $aColumnDefinition["width"] = "auto"; + $aColumnDefinition["searchable"] = false; + $aColumnDefinition["sortable"] = false; + $aColumnDefinition["title"] = ""; + $aColumnDefinition["type"] = "html"; + $aColumnDefinition["data"] = ""; + $aColumnDefinition["render"] = "function (data, type, row) { + var oCheckboxElem = $(''); + if (row.limited_access) { + oCheckboxElem.html('-'); + } else { + oCheckboxElem.find(':input').attr('data-object-id', row.id).attr('data-target-object-id', row.target_id); + } + return oCheckboxElem.prop('outerHTML'); + }"; + array_push($aColumnsDefinitions, $aColumnDefinition); + } + foreach ($aColumns as $sClassName => $aClassColumns) { $aClassAliases[$sClassName] = $sClassName; foreach ($aClassColumns as $sAttCode => $aData) { @@ -591,7 +635,7 @@ class DataTableFactory } } - $aOptions['select'] = $sSelectMode; + $aOptions['select'] = ["style"=>$sSelectMode]; $aOptions['pageLength'] = $iLength; @@ -601,10 +645,11 @@ class DataTableFactory "columns" => $aColumns, "extra_params" => $aExtraParams, "class_aliases" => $aClassAliases, + "select_mode" => $sSelectMode, ]); - $aOptions[] = [ + $aOptions =array_merge ($aOptions, [ "language" => [ "processing" => Dict::Format('UI:Datatables:Language:Processing'), @@ -628,6 +673,7 @@ class DataTableFactory ], "lengthMenu" => Dict::Format('Portal:Datatables:Language:DisplayLength:All'), "dom" => "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>", + "ordering"=>true, "order" => [], "filter" => false, "processing" => true, @@ -640,7 +686,7 @@ class DataTableFactory "method": "post", "pages": 5 // number of pages to cache } )' - ]; + ]); return $aOptions; } diff --git a/templates/components/datatable/layout.html.twig b/templates/components/datatable/layout.html.twig index 98d60cd11..b45e9a70b 100644 --- a/templates/components/datatable/layout.html.twig +++ b/templates/components/datatable/layout.html.twig @@ -1,5 +1,5 @@ {% for oSubBlock in oUIBlock.GetSubBlocks() %}{{ render_block(oSubBlock, {aPage: aPage}) }}{% endfor %} -{% if oUIBlock.GetOptions()["select"] is defined %} +{% if oUIBlock.GetOptions()["select_mode"] is defined %} @@ -7,7 +7,7 @@ - {% if oUIBlock.GetOptions()["select"] is defined %} + {% if oUIBlock.GetOptions()["select_mode"] is defined %} {% endif %} {% for aColumn in oUIBlock.GetDisplayColumns() %} diff --git a/templates/components/datatable/layout.js.twig b/templates/components/datatable/layout.js.twig index db37aedd6..ac9060fb7 100644 --- a/templates/components/datatable/layout.js.twig +++ b/templates/components/datatable/layout.js.twig @@ -20,22 +20,18 @@ function checkAllDataTable(table, value) { // Reset the list of saved selection... $(':input[name^=storedSelection]').remove(); $(table).parent().find(':checkbox[name^=selectObj]').trigger("change"); - //updateCounter(table); return true; } $('#{{ oUIBlock.GetId() }}').closest("[role=dialog]").on("dialogbeforeclose", function () { - console.warn("destroy on close"); - $('#{{ oUIBlock.GetId() }}').DataTable().clear(); -// $('#{{ oUIBlock.GetId() }}').DataTable().destroy(false); + $('#{{ oUIBlock.GetId() }}').DataTable().clear(); }); -{% if oUIBlock.GetOptions()["select"] is defined %} +{% if oUIBlock.GetOptions()["select_mode"] is defined %} var oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }} = []; {% endif %} if ($.fn.dataTable.isDataTable('#{{ oUIBlock.GetId() }}')) { - console.warn("destroy on load"); $('#{{ oUIBlock.GetId() }}').DataTable().destroy(false); } @@ -62,7 +58,12 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({ }, "lengthMenu": [[ {{ oUIBlock.GetOptions()["iPageSize"] }}, {{ oUIBlock.GetOptions()["iPageSize"]*2 }}, {{ oUIBlock.GetOptions()["iPageSize"]*3 }}, {{ oUIBlock.GetOptions()["iPageSize"]*4 }}, -1], [ {{ oUIBlock.GetOptions()["iPageSize"] }}, {{ oUIBlock.GetOptions()["iPageSize"]*2 }}, {{ oUIBlock.GetOptions()["iPageSize"]*3 }}, {{ oUIBlock.GetOptions()["iPageSize"]*4 }}, "{{ 'Portal:Datatables:Language:DisplayLength:All'|dict_s }}"]], "dom": "<'ibo-datatable-toolbar'pil>t<'ibo-datatable-toolbar'pil>", - "order": [], + {% if( oUIBlock.GetOptions()["sort"][0] is defined ) %} + "order": [[{{ oUIBlock.GetOptions()["sort"][0]}},'{{ oUIBlock.GetOptions()["sort"][1]}}']], + {% else %} + "order":[], + {% endif %} + "ordering": true, {% if oUIBlock.GetOptions()["select"] is defined %} "select": { "style": "{{ oUIBlock.GetOptions()["select"] }}" @@ -74,7 +75,6 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({ $(oRow).select(); $(oRow).find('td:first-child input').prop('checked', true); } - //$(table).DataTable().rows({ page: 'current' }).select(); } else { if (oData.id in oSelectedItems{{ oUIBlock.GetOptions()['sTableId'] }}) { $(oRow).select(); @@ -99,7 +99,7 @@ var oTable{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').DataTable({ "processing": true, "serverSide": true, "columns": [ - {% if oUIBlock.GetOptions()["select"] is defined %} + {% if oUIBlock.GetOptions()["select_mode"] is defined %} { "width": "auto", "searchable": false, @@ -230,12 +230,12 @@ $aOptions = { 'iPageSize': '{{ oUIBlock.GetOptions()["iPageSize"] }}', 'sTableId': '{{ oUIBlock.GetOptions()["sTableId"] }}', "sRenderUrl": "{{ oUIBlock.GetAjaxUrl() }}", - "sSelectMode": "{{ oUIBlock.GetOptions()["select"] }}", + "sSelectMode": "{{ oUIBlock.GetOptions()["select_mode"] }}", "oData": {{ oUIBlock.GetAjaxData() |raw }}, 'oLabels': {"moveup": "{{ 'UI:Button:MoveUp'|dict_s }}", "movedown": "{{ 'UI:Button:MoveDown'|dict_s }}"}, 'oDefaultSettings': {{ oUIBlock.GetOptions()["oDefaultSettings"]|raw }} }; -console.warn($aOptions); + //if (!typeof $('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings() !== "undefined") if ($('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings()) { $('#datatable_dlg_{{ oUIBlock.GetId() }}').DataTableSettings("destroy");