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.
Related
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) {
......
}
});
I have a Highcharts bar graph. Each point has a group of results, however the first and last element are being cropped. How can I extend the x-axis so every bar is shown?
In the image below each group has the same results so you can see the N and P are dropped from the first group and S and Mg from the last grouping.
The data is coming from a database, so i don't know how many groups there will be, or what range (so simply adding a day to each end is not sufficient, the overlap could be larger or smaller)
const conf = {
chart: {
type: "column",
animation: false,
marginRight: 10,
dateFormat: "dd/mm/YYYY"
},
title: {
text: "Spread Events"
},
xAxis: {
type: "datetime",
tickPixelInterval: 50
},
yAxis: {
title: {
text: "Spread"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: this.state.graphData
};
and this is the graphData from the example
[
{
"name": "N",
"data": [[1559669642443, 300], [1559343600000, 300], [1559257200000, 300]]
},
{
"name": "P",
"data": [[1559669642443, 160], [1559343600000, 160], [1559257200000, 160]]
},
{
"name": "K",
"data": [[1559669642443, 470], [1559343600000, 470], [1559257200000, 470]]
},
{
"name": "S",
"data": [[1559669642443, 120], [1559343600000, 120], [1559257200000, 120]]
},
{
"name": "Mg",
"data": [[1559669642443, 90], [1559343600000, 90], [1559257200000, 90]]
}
]
You have Highcharts error #15 in a console, which means that your data is not sorted. Highcharts requires sorted data in ascending X order:
series: [{
...,
data: [
[1559257200000, 300],
[1559343600000, 300],
[1559669642443, 300]
]
}, ...
]
Live demo: http://jsfiddle.net/BlackLabel/y2rzd65m/
I am trying to make some of checkboxes checked and disabled in jqxTreeGrid in below code:
$("#treegrid_portfolio").jqxTreeGrid(
{
source: dataAdapter,
pageable: true,
pagerMode: 'advanced',
pageSizeMode: 'root',
pageSize: 5,
pageSizeOptions: ['1', '2', '3', '5', '10'],
columnsResize: true,
sortable: true,
filterable: true,
theme: "custom",
filterMode: 'advanced',
altRows: false,
checkboxes: true,
columnsReorder: true,
hierarchicalCheckboxes: true,
width: getWidth("TreeGrid"),
/*width: "100%",*/
ready: function () {
$("#treegrid_portfolio").jqxTreeGrid('expandRow', '1');
$("#treegrid_portfolio").jqxTreeGrid('expandRow', '2');
}
,
columns: [
{
text: "ID", dataField: "formattedID", width: 120, pinned: true, cellclassname: "requestIdCls", resizable: false
}
,
{
text: '', datafield: 'alert', cellsrenderer: linkrendererAlert, width: 60, pinned: true, cellclassname: "alert_column", cellsAlign: 'center', filterable: false, resizable: false
}
,
{
text: "Portfolio Items Name", dataField: "PortfolioItem_Name", width: 200
}
,
{
text: "Agile Central Project Name", dataField: "AC_ProjectName", width: 200
}
]
}
);
Is it possible to make the same on grid ready function. I have done some research on the jqwidget. But didn't got any solution or clues. Please help me any one.
You need to make below changes also just put id attribute for each of your column data .Then put the id for selecting checkbox to set true.
follow this link i have get a fiddle for you Invoke the uncheckRow method.
var data = [{
"id": "1",
"name": "Corporate Headquarters",
"budget": "1230000",
"location": "Las Vegas",
"children": [{
"id": "2",
"name": "Finance Division",
"budget": "423000",
"location": "San Antonio",
"children": [{
"id": "3",
"name": "Accounting Department",
"budget": "113000",
"location": "San Antonio"
}, {
"id": "4",
"name": "Investment Department",
"budget": "310000",
"location": "San Antonio",
children: [{
"id": "5",
"name": "Banking Office",
"budget": "240000",
"location": "San Antonio"
}, {
"id": "6",
"name": "Bonds Office",
"budget": "70000",
"location": "San Antonio"
}, ]
}]
}, {
"id": "7",
"name": "Operations Division",
"budget": "600000",
"location": "Miami",
"children": [{
"id": "8",
"name": "Manufacturing Department",
"budget": "300000",
"location": "Miami"
}, {
"id": "9",
"name": "Public Relations Department",
"budget": "200000",
"location": "Miami"
}, {
"id": "10",
"name": "Sales Department",
"budget": "100000",
"location": "Miami"
}]
}, {
"id": "11",
"name": "Research Division",
"budget": "200000",
"location": "Boston"
}]
}];
var source = {
dataType: "json",
dataFields: [{
name: "name",
type: "string"
}, {
name: "budget",
type: "number"
}, {
name: "id",
type: "number"
}, {
name: "children",
type: "array"
}, {
name: "location",
type: "string"
}],
hierarchy: {
root: "children"
},
localData: data,
id: "id"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});
// create jqxTreeGrid.
$("#treeGrid").jqxTreeGrid({
source: dataAdapter,
altRows: true,
width: 680,
theme:'energyblue',
checkboxes: true,
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '1');
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [{
text: "Name",
align: "center",
dataField: "name",
width: 300
}, {
text: "Budget",
cellsAlign: "center",
align: "center",
dataField: "budget",
cellsFormat: "c2",
width: 250
}, {
text: "Location",
dataField: "location",
cellsAlign: "center",
align: "center"
}]
});
$("#jqxbutton").jqxButton({
theme: 'energyblue',
height: 30
});
$("#treeGrid").jqxTreeGrid('checkRow',2);
The last line of code
$("#treeGrid").jqxTreeGrid('checkRow',2); is reason to check the checkbox true while loading.
Please makesure if any help required.Hope it may help.
To check rows on grid ready function use checkRow method, and lockRow will disable editing of the row and give the row gray style.
3 or 8 are Unique ID which identifies the row Id (data field in data source).
ready: function () {
$("#treeGrid").jqxTreeGrid('checkRow', '3');
$("#treeGrid").jqxTreeGrid('lockRow', '3');
$("#treeGrid").jqxTreeGrid('checkRow', '8');
$("#treeGrid").jqxTreeGrid('lockRow', '8');
},
To disable checkboxes you can use rowUncheck event to prevent uncheck by checking the row again.
$('#treeGrid').on('rowUncheck', function (event) {
$("#treeGrid").jqxTreeGrid('checkRow', '3');
$("#treeGrid").jqxTreeGrid('checkRow', '8');
});
$("#treeGrid").jqxTreeGrid({
// ......
});
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 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/