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/
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 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>
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 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/
This javascript
$('#example').dataTable({"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{ "width": "50%" },
{ "width": "100px" },
{ "width": "100px" },
{ "width": "50px" },
{ "width": "100px" }
]});
Together with this table
<table cellpadding="0" cellspacing="0" border="0" class="" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
</tbody>
</table>
Ends up being not a fixed size table.
First of all, I don't want it to be 100% width, and secondly, putting px or % in the js part, has no effect at all.
Am I overlooking something?
See here in this fiddle about the datatables auto column width problem
First of all, I would strongly recommend that you upgrade to 1.10.x -> http://www.datatables.net/download/ or at least the latest version of the 1.9-series, 1.9.4.
Then, yes - when using 1.9.0 as you are, (all 1.9.x versions) the columns width option is named sWidth. So instead :
$('#example').dataTable({
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "50%" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" }
]
});
To deal with your requirement "I don't want it to be 100% width" you must specify a width for the table, or at least a max-width. Otherwise datatables will assume the table should be 100% in width, and therefore expand the "sWidth": "50%" column to whatever there is left. So if you want the table to be 700px, as an example :
#example {
width: 700px;
}
your fiddle forked -> http://jsfiddle.net/9n5vrbnz/
If you want a completely fixed width, that is, the table and the injected controls like the search box and pagination to be kept within a certain width, you can style the wrapper element. It is always named <table id>_wrapper :
#example_wrapper {
width: 700px;
}
se fiddle -> http://jsfiddle.net/1rce0d4k/