I use datatables and sort two columns by german date with the plugin datetime-de.js. In one column I insert a picture in the cell if a date for that record is not given.
When I use the date format for one column, the sort works. But for both the sort breaks (cick on sort the second column)
How can both columns get sorted by ignoring the rows with the pictures?
$(document).ready(function() {
$('#liste').DataTable({
dom: 'Bfrtip',
fixedHeader: {
header: true,
footer: true
},
order: [[ 0, 'asc' ]],
paging: false,
columnDefs: [{ type: 'de_date', targets: 1,
type: 'de_date', targets: 0},
],
language: { 'decimal': ',',
'thousands': '.',
'sEmptyTable': 'Keine Daten in der Tabelle vorhanden',
'sInfo': '_START_ bis _END_ von _TOTAL_ Einträgen',
'sInfoEmpty': '0 bis 0 von 0 Einträgen',
'sInfoFiltered': '(gefiltert von _MAX_ Einträgen)',
'sInfoPostFix': '',
'sInfoThousands': '.',
'sLengthMenu': '_MENU_ Einträge anzeigen',
'sLoadingRecords': 'Wird geladen...',
'sProcessing': 'Bitte warten...',
'sSearch': 'Suchen',
'sZeroRecords': 'Keine Einträge vorhanden.',
'oPaginate': {
'sFirst': 'Erste',
'sPrevious': 'Zurück',
'sNext': 'Nächste',
'sLast': 'Letzte'
},
'oAria': {
'sSortAscending': ': aktivieren, um Spalte aufsteigend zu sortieren',
'sSortDescending': ': aktivieren, um Spalte absteigend zu sortieren'
}
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/plug-ins/1.11.5/sorting/date-de.js"></script>
<table id="liste" class="display" cellspacing="0" style="width:100%">
<thead><tr><th align="center">Column1</th><th>ColumnDatePicture</th></tr></thead>
<tbody>
<tr>
<td>14.01.2022</td><td align="center">29.03.2022</td>
</tr>
<tr>
<td>14.01.2022</td><td align="center"><img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg" title="smile"></td>
</tr>
<tr>
<td>15.01.2022</td><td align="center">27.03.2022</td>
</tr>
<tr>
<td>16.01.2022</td><td align="center"><img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg" title="smile"></td>
</tr>
<tr>
<td>14.01.2022</td><td align="center">27.04.2022</td>
</tr>
<td>14.07.2022</td><td align="center">27.05.2022</td>
</tr>
<td>14.06.2022</td><td align="center">27.04.2022</td>
</tr>
<td>14.05.2022</td><td align="center">26.04.2022</td>
</tr>
<td>14.04.2022</td><td align="center">24.05.2022</td>
</tr>
<td>14.03.2022</td><td align="center">17.04.2022</td>
</tr>
<td>14.02.2022</td><td align="center">13.04.2022</td>
</tr>
<tr>
<td>14.01.2022</td><td align="center"><img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg" title="smile"></td>
</tr>
</tbody>
<tfoot><tr><th align="center">Column1</th><th>ColumnDatePicture</th></tr></tfoot>
</table>
Use the data-sort or data-order property on the table cell. Link to documentation
<tr>
<td>14.02.2022</td>
<td align="center" data-order="13.04.2022">13.04.2022</td>
</tr>
<tr>
<td>14.01.2022</td>
<td align="center" data-order=""><img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg" title="smile"></td>
</tr>
Related
My Datatable jQuery code is like below.
$(".shop_table").DataTable({
pageLength: 10,
filter: true,
deferRender: true,
});
My HTML code is like below.
<table class="shop_table shop_table_responsive table table-striped table-bordered">
<thead>
<tr>
<th class="product-name">Attribute Name</th>
<th class="product-desc">Catalog Number</th>
<th class="product-price">Value</th>
</tr>
</thead>
<tbody>
{{#each this}}
<tr>
<td class="product-desc">
{{ this.ATTRIBUTE_NAME }}
</td>
<td class="product-price" data-title="Box Price">
{{ this.CATALOG_NUMBER }}
</td>
<td class="product-quantity" data-title="Number of Boxes">
{{ this.VALUE }}
</td>
</tr>
{{/each}}
</tbody>
</table>
But I am getting output like below without Search Box & Pagination.
Depending on what styling integration option you selected (BootStrap, jQuery UI, Foundation etc...) it may wipeout your default datatable DOM setting. Setting up the DOM in DataTables is difficult. You can read about it here.
jQuery DataTables DOM info
I was going to just leave a comment, but i don't have the rep to do that. I use BootStrap and in the DataTables settings I have this
$.extend($.fn.dataTable.defaults, {
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
pageLength: 25,
dom: "<'row'<'col-md-3'l><'col-md-7'f><'col-md-2 text-right'B>><'row'<'col-md-12't>><'row'<'col-md-6'i><'col-md-6'p>>",
autoWidth: false,
language: {
search: "Filter",
emptyTable: "No records found"
}
});
I'm trying to add a jQuery data table in Salesforce lightning component. Here is the code. It is not loading at all. What am I doing wrong?
<ltng:require scripts="{!join(',','//cdn.datatables.net/1.10.4/css/jquery.dataTables.css'
,'//code.jquery.com/jquery-1.12.4.js'
,'//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js')}"
afterScriptsLoaded="{!c.afterscriptsLoaded}"/>
<table id="showContacts" class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th class="slds-is-sortable slds-text-title--caps">
<span class="slds-truncate" title="EID">EID</span>
</th>
<th class="slds-is-sortable slds-text-title--caps">
<span class="slds-truncate" title="Name">Name</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">
<div class="text-wrap">10887738</div>
</td>
<td>
<div class="slds-truncate text-wrap" title="Adam Will">Adam, Will</div>
</td>
</tr>
</tbody>
</table>
({
afterscriptsLoaded : function(component,event,helper){
j$('[id$="showStudents"]').DataTable({
"scrollY": "260px",
"scrollCollapse": true,
"paging": true,
"searching": true,
"ordering": true,
"info": true,
"dom": 'Bfrtip',
"buttons": [
'copy',
{extend: 'csv',title: 'Criteria export'},
{extend: 'excel',title: 'Criteria export'},
{extend: 'pdf',title: 'Criteria export'},
'print'
]
} );
},
})
My question is about how to show this table on lightning component in Salesforce? Whenever I load the page I see a blank page.
Note: I am showing a sample table.
I have set a bootstrap table with the filter control extension. The table where I want to filter offers many popovers and tooltips. However, they stop working after filtering. What can I do to re-activate them?
An example of my code can be seen here (Location Type "Other" should have a popover, this works only before filtering for the first time):
<table ref="mainTable" class="table table-striped table-bordered table-hover"
cellSpacing="0" id="mainTable" data-show-toggle="true"
data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="CustomerName" data-sortable="true" data-filter-control="select">Customer Name</th>
<th data-field="LocationType" data-sortable="true">Location Type</th>
<th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Cap Corp</td>
<td>Main</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Cap Corp</td>
<td><a class="ajaxPopover">Other</a></td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td>Main</td>
<td>Slough SL1 4DX</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td><a class="ajaxPopover">Other</a></td>
<td>London W1B 5HQ</td>
</tr>
</tbody>
</table>
... with the following javascript code:
$('#mainTable').bootstrapTable({
});
// Add some popovers
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
http://jsfiddle.net/7bpLrafx/4/
Thanks for any help!
You have to reinitialize popovers when changes are made in the table (like sorting, change of display and so on).
JS:
$('#mainTable').on('all.bs.table', function () {
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
});
You can use Bootstrap's built-in functionality to reinitialize the popovers after table filtering in DOM:
$('#mainTable').on('post-body.bs.table', function () {
$('.ajaxPopover').popover();
});
I want my datatable to display 50 rows per page.
I tried to set it with : bLengthChange: true and pageLength: 50 but it didn't work.
In an ideal world, I would also get rid of the bLengthChange -> false, so that I don't see the combo to select how much rows do I want...
Here is my code.
<html><body>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
</head>
<body>
<table class="table responsive table-togglable table-hover">
<thead>
<tr>
<th data-toggle="true">ID</th>
<th >Usuario</th>
<th >Objeto</th>
<th >Id del Objeto</th>
<th class="none">Antes</th>
<th class="none">Despues</th>
<th >type</th>
<th >Creación</th>
<th >Actualización</th>
</tr>
</thead>
<tbody>
<tr>
<td>2165</td>
<td> - </td>
<td>PersonReferences</td>
<td>3802973</td>
<td> - </td>
<td> Large Text </td>
<td>created</td>
<td>2016-05-11 17:07:23</td>
<td>2016-05-11 17:07:23</td>
</tr>
</tbody>
</table>
<script src="http://rh.dev/assets/materialize/js/jquery-1.11.2.min.js"></script>
<script src="http://rh.dev/assets/js/datatables/datatables.min.js"></script>
<script src="http://rh.dev/assets/js/datatables/extensions/responsive.min.js"></script>
<script>
$('.table-togglable').DataTable({
bLengthChange: true,
pageLength: 50,
bInfo: false,
responsive: true,
"bAutoWidth": false,
});
</script>
Any Idea?
You can use iDisplayLength for DataTables 1.10+:
Number of rows to display on a single page when using pagination. If
feature enabled (bLengthChange) then the end user will be able to
override this to a custom setting using a pop-up menu.
$(".table-togglable").DataTable({
bLengthChange: true,
"lengthMenu": [ [10, 15, 25, 50, 100, -1], [10, 15, 25, 50, 100, "All"] ],
"iDisplayLength": 50,
bInfo: false,
responsive: true,
"bAutoWidth": false
});
Result: https://jsfiddle.net/cmedina/7kfmyw6x/50/
I have an HTML table in which I have applied the DataTables function to. I use the first row of the table with the class 'template' applied as my template row. Then pick this formatting up and populate all the rows in the table using a JSON feed. The problem is that the pagination provided by DataTables includes this hidden template row so always makes my first page display 1 less row than all the others.
Is there a way to exclude any rows (of which there will only be one) with the class 'template' applied to the tr?
<!-- DataTables CSS -->
<link href="/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<div class="alert-message"></div>
<div class="dataTable_wrapper">
<table class="loadtable table table-hover table-stripped" id="problem_table" data-page="0" data-params="" data-orderby="p.name" data-orderdir="DESC" data-url="/admin/problem/ajax/tables/problem" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th class="orderable asc">Name</th>
<th class="orderable no-sort" width="10%">Helpful?</th>
<th class="orderable" width="15%">Created</th>
<th class="orderable c" width="10%">Live?</th>
<th class="r no-sort" width="12%">Actions</th>
</tr>
</thead>
<tbody>
<tr id="problem_#PROBLEMID#" class="template #ROWCLASS#">
<td class="orderable asc">#NAME#</td>
<td class="orderable"><span class="fa fa-thumbs-o-up"> #UP_VOTE#</span> <span class="fa fa-thumbs-o-down"> #DOWN_VOTE#</span></td>
<td class="orderable">#CREATED#</td>
<td class="orderable c"><span class="fa #IS_LIVE#"></span></td>
<td class="r last">#ACTIONS#</td>
</tr>
</tbody>
</table>
</div>
$(document).ready(function() {
delay( function() {
$('#problem_table').DataTable({
responsive: true,
pageLength: 20,
aLengthMenu: [[20, 40, 60, -1], [20, 40, 60, "All"]],
aoColumnDefs : [{ "bSortable" : false, "aTargets" : [ "no-sort" ] }]
});
}, 200 );
});
You can use the good old custum row filter for this :
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var row = oSettings.aoData[iDataIndex].nTr;
return $(row).hasClass('template') ? false : true;
}
);
Even though it is pre-1.10.x hungarian notation, it still works with DataTable() instances.
demo -> http://jsfiddle.net/zaxkrc49/