Datatables allows you to use shift+select, while also allowing you to select single items without losing previously selected items by having the select style set to multi+shift.
'select': {style': 'multi+shift'}
However, for this datatable, that doesn't seem to work at all. What am I missing?
var $testTable = $("#test-list").DataTable({
"dom": '<"dataTables_top"i<"dataTables_custom_buttons">f>rt'+ '<"dataTables_bottom"ilp>',
"autoWidth": false,
"lengthChange": 100,
"lengthMenu": [[10, 25, 100, 200, 500, 1000], [10, 25, 100, 200, 500, 1000]],
"paging": true,
"pagingType": "full_numbers",
"stripeClasses": [ 'odd', 'even' ],
"order": [[1, 'asc']],
"language": {
"emptyTable": '<h3>Test...</h3>',
"search" : '',
"sLengthMenu" : "_MENU_ Per Page",
"info": "Showing _START_ to _END_ of _TOTAL_",
paginate: {
first: '<i class="fad fa-step-backward"></i>',
previous: '<i class="fad fa-backward"></i>',
next: '<i class="fad fa-forward"></i>',
last: '<i class="fad fa-step-forward"></i>'
}
},
'select': 'multi+shift',
"aoColumnDefs": [
{
"targets": [-1,-2,-3,-4,-5,-6,-7,-8,-9,-11],
'searchable': false
},
{
"targets": 'no-sort',
"orderable": false,
},
{
"targets": [8,11],
"visible": false
},
{
"iDataSort": 8,
"aTargets" : [7]
},
{
"iDataSort": 11,
"aTargets" : [10]
},
{
"targets": -1,
'searchable': false
}
],
"initComplete": function() {
......
},
"drawCallback": function(settings) {
......
}
});
Related
Have a table with some data loaded from server by provised ajax to DataTable, also have yadcf for filtering on server side. In one of columns i have select2 box, in what i want see only predefined (loaded from server) options (in example on jsfiddle it is opt variable), but options in select2 contains also data from column. How i can disable adding column data, and stay only loaded from server options?
https://jsfiddle.net/6ssh8mg4/
code:
var opts = [{id:0, text:"Some 1"},{id:1, text:"Some 2"}];
var table = $("#docTable").DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: true,
deferRender: true,
pageLength: 10,
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
columns: [
{ "data": "Identifier", className: "nowrap" },
{ "data": "Name" },
]
});
yadcf.init(table, [
{ column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
{
column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
select_type_options: {
data: opts,
width: '180px',
dropdownAutoWidth: true,
}
},
]);
You should use the data attribute (in your case with data/label properties), read the docs
Here is a working sample
var opts = [{value:0, label:"Some 1"},{value:1, label:"Some 2"}];
var table = $("#docTable").DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: true,
deferRender: true,
pageLength: 10,
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
columns: [
{ "data": "Identifier", className: "nowrap" },
{ "data": "Name" },
]
});
yadcf.init(table, [
{
column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
{
data: opts,
column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
select_type_options: {
width: '180px',
dropdownAutoWidth: true,
}
},
]);
jsfiddle
I am on DataTable 1.10.11 and yadcf 0.8.9 and using ajax data source. yadcf is working great however the column select filters are not populating with all possible results if I enable deferRender. If I set this to false all possible results appear in the column select filter. Could someone share with me how to get all possible results for the column select filters while using deferRender? Any help is greatly appreciated! BTW I am new to coding so if I did not explain something clearly please let me know.
Here is a sample of the code:
var table = $('#MyTable').DataTable({
responsive: true,
autoWidth: false,
deferRender: true,
iDisplayLength: 5,
aaSorting: [[9,'desc'], [3,'asc'], [4,'asc']],
ajax:{url:"./assets/json/" + xFileName + ".json"},
columns: [
{ "data": "col0" },
{ "data": "col1" },
{ "data": "col2" },
{ "data": "col3" },
{ "data": "col4" },
{ "data": "col5" },
{ "data": "col6" },
{ "data": "col7" },
{ "data": "col8" },
{ "data": "col9" },
{ "data": "col10" },
{ "data": "col11" },
{ "data": "col12" },
{ "data": "col13" }
],
columnDefs: [
{
"targets": [ 0,1,10,11,12 ],
"visible": false
}
],
sDom: "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-12'i><'col-lg-12 center'Bp>>",
sPaginationType: "bootstrap",
oLanguage: {sLengthMenu: "_MENU_ records per page"},
buttons: ['excelHtml5', ]
});
yadcf.init(table, [
{column_number : 2},
{column_number : 3},
{column_number : 4},
{column_number : 6},
{column_number : 7},
{column_number : 8},
{column_number : 13}],
{cumulative_filtering: true});
I am using the latest version Jquery DataTables.net, and have a table that display a total of 10 records per page, with a max count of 1004.
However, in the info bar, this reads:
Showing 1 to 5 of 1.004
the default of my table is as follows:
var oMessageDate = $("#messageDateDT").DataTable({
dom: "<'row'<'col-sm-12'<'pull-right'T><'pull-left'l>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'p><'clearfix'>>>",
stateSave: true,
pageLength: 10,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
columns: [
{ data: "MessageReference", sWidth: "15%" },
{ data: "Beneficiary" },
{ data: "Currency", sWidth: "5%" },
{ data: "Amount" },
{ data: "MessageDate", sWidth: "15%" },
{ data: "MessageType", sWidth: "5%" },
{ data: "Direction", sWidth: "5%"},
{ data: "Assigned", sWidth: "10%" },
{ data: "Status", sWidth: "17%" },
{ data: "Message" },
{ data: "MessageId", sWidth: "5%" },
{ data: "StatusCode" }
],
"autoWidth": false,
"pagingType" :"full_numbers",
language: {
"decimal": "-",
"thousands": ".",
"infoEmpty": "No entries to show",
"lengthMenu": "Display _MENU_ records",
"processing": "Loading data",
searchPlaceholder: "on everything",
"zeroRecords": "No records to display",
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
},
"columnDefs": [
{ "visible": false, "targets": 9 },
{ "visible": false, "targets": 10 },
{ "visible": false, "targets": 11 }
]
});
Can you please advise, how I can correct this.
Your screenshot shows
Showing 1 to 10 of 1.004 entries
And your default pageLength option is 10 which would give you 101 pages.
I have a datatable having 12 columns.
oTable = $('#NotificationsTable').dataTable({
"bDestroy": true,
"bFilter": true,
"bJQueryUI": true,
"bPaginate": true,
"bsorting": true,
"iDisplayStart": 0,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"iDisplayLength": 25,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "URL",
"fnServerParams": function (aoData) {
aoData.push({ "name": "param", "value": "page" }
);
},
"aoColumns": [
{ "mData": "Col0", "sClass": "center" },
{ "mData": "Col1", "sClass": "center" },
{ "mData": "Col2", "sClass": "center" },
{ "mData": "Col3", "sClass": "center wrapword" },
{ "mData": "Col4", "sClass": "center" },
{ "mData": "Col5", "sClass": "center" },
{ "mData": "Col6", "sClass": "center" },
{ "mData": "Col7", "sClass": "center" },
{ "mData": "Col8", "sClass": "center" },
{ "mData": "Col9", "sClass": "center" },
{ "mData": "Col10", "sClass": "center" },
{ "mData": "Col11", "bSortable": true }
],
"fnInitComplete": function (oSettings, json) {
//Some function
},
}
});
oTable .columnFilter({
sPlaceHolder: "head:after", aoColumns: [
{ type: "text" }, { type: "text" }, { type: "text" }, { type: "text" },
{ type: "text" }, null, { type: "text" }, { type: "text" },
{ type: "text" }, { type: "text" }, { type: "text" }, { type: "text" }
]
});
Here I want to disable the NEXT button of the datatable when "ALL" entries are shown.
FYI: I am having one row already in the datatable but I never wanted to show that to the user.
The Next button always have the id <table_id>_next, the length menu <table_id>_length. in dataTables 1.9.x there is individual CSS classes for each button's enabled or disabled mode. Toggle those classes when length value is -1, the value of All. Finally unbind the Next page event from the button.
$('select[name="NotificationsTable_length"]').on('change', function() {
var $nextButton = $("#NotificationsTable_next");
if ($(this).val() == -1) {
$nextButton.toggleClass('paginate_disabled_next');
$nextButton.unbind('click');
} else {
$nextButton.toggleClass('paginate_enabled_next');
}
}).trigger('change');
1.9.4 demo -> http://jsfiddle.net/stgLt59d/
In dataTables 1.10.x there is just a single .disabled class targeting all the pagination buttons.
$('select[name="NotificationsTable_length"]').on('change', function() {
var $nextButton = $("#NotificationsTable_next");
if ($(this).val() == -1) {
$nextButton.addClass('disabled');
$nextButton.unbind('click');
} else {
$nextButton.removeClass('disabled');
}
}).trigger('change');
demo -> http://jsfiddle.net/20q6adng/
horizontal scroll in datatable.net not aligning headers with actual column data on scrolling.
On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.
My Code sample ::--------
$('#abc').dataTable({
"aaData": userContactGridData,
"bAutoWidth":false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
{ "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
{ "sWidth": "200px", "aTargets": ["userName"] },
{ "sClass": "icon", "aTargets": ["icon"] },
{ "sClass": "gearIcon", "aTargets": ["gearIcon"] },
{ "sClass": "userName", "aTargets": ["userName"] },
{ "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
{ "bVisible": false, "aTargets": ["adminRoleIcon"] },
],
"sDom": 'C<"H"Tfr>t<"F"ip>',
"iDisplayLength": 6,
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[2, "asc"]], // sort by name by default
"sScrollX": "100%",
"bScrollCollapse": true
});
Try adding sScrollX: 100% and bScrollCollapse: true
Then your code look like as below
var oTable;
$(document).ready(function () {
oTable = $("#yourElementName").dataTable({
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
{ "aTargets": ['_all'], "bSortable": false}],
"aaSorting": [[0, 'asc']]
});
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 10);
});