Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

DataTable - There are 2 arrow icons on a column ordered but non-orderable


Hi,

In want to sort data by a default column and prevent user from changing it. That means, NO column in my table is sortable .

Please try it on your example
https://preview.keenthemes.com/html/metronic/docs/general/datatables/server-side

You are sorting by 5th column by order: [[5, 'desc']]
Please prevent the sort from changing of all columns by the below code

columns: [
{ data: 'RecordID', orderable: false },
{ data: 'Name', orderable: false },
{ data: 'Email', orderable: false },
{ data: 'Company', orderable: false },
{ data: 'CreditCardNumber', orderable: false },
{ data: 'Datetime', orderable: false },
{ data: null, orderable: false },
]


After table is drawed, you will see, under the arrow icon on the 5th column, there is another arrow icon which should be hidden.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (14)


Hi Sean,
Sorry for late response.

1. Yes, my Metronic version is the latest v8.1.8

2. Here is my code
https://jsfiddle.net/cungo_bu/o5amnrzd/14/

You can see, it works well with DataTables layout.
Please notice order: [[5, 'desc']] and { data: 'Datetime', title: 'Datetime', orderable: false }

I discover that the root cause is scrollX: true . If I get rid of it, the Metronic layout is good. However, I really want to keep the horizontal scrollbar.

Thanks



Hi,

Noted, let us check it further by enabling scrollX: true and come back to you with a workaround. I will update you once we have a solution in a few days.

Regards.



Hi,

It seems this is a mixed Datatable and Metronic's issue. By right Datatable should not leave sorting_asc and sorting_desc classes on the unsorted cell. Metronic just globally overrides the datatable cell padding.

You can use below workaround to fix this issue for the scrollable datatable:

1) In src/sass/vendors/plugins/_datatables.scss edit line 212:

<pre dir="scss">
// Scroll
div.dataTables_scrollBody {
border-left: 0 !important;

.sorting_disabled.sorting_asc,
.sorting_disabled.sorting_desc {
&:after {
display: none !important;
}
}
}
</pre>

2. If you have the table header cell alignment issue, in the HTML set pe-* class to the default ordered/disable cell as per gs-* set the table:


<table class="table table-striped gy-5 gs-7">
<thead>
<tr class="fw-semibold fs-6 text-gray-800">
<th class="pe-7">Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<body>
</tbody>
</table>


Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.

Please give it a try and let us know the result.

Regards.



Hi Sean,

Sorry for late response, quite busy these days.
Yeah, your fix can get grid of the redundant arrow as expected.

Could you please add this fix into the next update?

Thanks



Hi,

Glad to hear that. We will include it in the next update v8.1.9 in a few weeks.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Sorry,
Because the order base is 0, not 1 so the bug happens in 6th column, not 5th column as I mentioned above.

Thanks



Hi,

Have you managed to fix it or do you still need our help?

Regards.



Hi Sean,

I still need your help. It is a layout bug regarding css.

Thanks



Hi,

Can you replace the code in src/sass/vendors/plugins/_datatables.scss

and change the sorting cell styles as shown below:


table.dataTable > thead {
.sorting_disabled,
.sorting {
&:after,
&:before {
display: none !important;
}
}

.sorting_asc:not(.sorting_disabled),
.sorting_desc:not(.sorting_disabled) {
vertical-align: middle;

&:before,
&:after {
position: relative !important;
opacity: 1 !important;
display: inline-block !important;
width: 0.75rem;
height: 0.75rem;
content: " " !important;
//top: 50%;
bottom: auto;
right: auto !important;
left: auto;
margin-left: 0.5rem;
}

&:before {
display: none !important;
}
}
}


You can refer to this to get the full code.


Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.


Regards.



Hi Sean,

Tried and your fix hid both arrow icons. Actually, I think the only second icon should be hidden, not the first because the data is being sorted on that column and the first icon is showing the sort direction.

In fact, orderable: true just prevents user from changing the sort direction and we still need to show the current direction.

Do you think so?

Thanks.



Hi,

Sorry, please ignore the fix and revert back to the changes.
May I know your Metronic version ? Are you getting this issue with the latest Metronic v8.1.8 ? It seems we should not reproduce the issue with the latest version. Can you please provide a screenshot of the issue using https://imgur.com/ ?

Regards.



Hi,
Sure, here you are

https://imgur.com/a/Eq5IsDr

The bug only happens when I set orderable: false for the column.
Besides, I want to mention that my project is including the below fix, not sure if it is the reason.

https://devs.keenthemes.com/question/nested-datatable-example#answers

Thanks



Well, I have tried to remove the fix on

https://devs.keenthemes.com/question/nested-datatable-example#answers

but the bug is still there. I think that fix is not the reason.



Hi,

We will check it further. Is the second arrow shown only when the table has no rows or shown with rows as well? May I know your Metronic version and could you please provide your table's HTML and JS codes using https://gist.github.com/ ? The above-provided code seems truncated a bit.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(