how to disable the page 2, page 3, page 4 clickable in pagination
how to disable the page 2, page 3, page 4 clickable in pagination
Hi All:
I need your help or advice.
Here is the code:
The output is that there are 4 pages.
How can I disable page 2,3,and 4 in the datatable after it display the result and I entered a value in a field in the last column.
I know I have an onblur event that is triggered after thaey entered a value.
I know the page 2, page 3, and page 4 is using csss.
How can I override the css and make the css not clickable?
$.fn.dataTable.ext.errMode = 'none';
if (!$.fn.dataTable.isDataTable('#TableId')) {
table = $("#TableId").on('error.dt',
function(e, settings, techNote, message) {
console.log('An error has been reported by DataTables: ',message);
})
.on( 'processing.dt', function ( e, settings, processing ) {
if(processing){
$("#TableId_wrapper #TableId_processing span").focus();
}
})
.on( 'page.dt', function () {
//do nothing
})
.dataTable({
"bInfo": false,
"processing": true,
"pageLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"bLengthChange": false,
"bSort":true,
"deferLoading": [10, 100 ],
"data": receivedData,
"columns" : [
{ "data" : "Number" },
{ "data" : "Name" },
{ "data" : "Limit" },
{ "data" : "test1Balance" },
{ "data" : "test2Balance" },
{ "data" : "Credit" },
{ "className": "alignRight", "data" : "Amount"}
],
order: [],
"aoColumns" : [
{ "sWidth": '210px' },
{ "sWidth": '170px' },
{ "sWidth": '165px' },
{ "sWidth": '165px' },
{ "sWidth": '140px' },
{ "sWidth": '165px' },
{ "sWidth": '165px' }
],
"aoColumnDefs" : [
{
"bSortable" : true,
"aTargets" : [ 0 ],
"sWidth" : "210px",
"className": "dataFontSize",
"searchable" : true,
"mRender" : function(data, type, full) {
return '<span style="width:235px;vertical-align : middle;" tabindex="0">' + full.Number + '</span>';
}
},
{
"bSortable" : true,
"aTargets" : [ 1 ],
"sWidth" : "170px",
"className": "dataFontSize",
"searchable" : true,
"mRender" : function(data, type, full) {
return '<span style="width:210px;vertical-align : middle;" tabindex="0">' + full.Name + '</span>';
}
},
{
"aTargets" : [ 2 ],
"bSortable" : true,
"sWidth" : "165px",
"searchable" : false,
"className": "dataFontSize",
"mRender" : function(data, type, full) {
return '<span style="padding-left:4px;width:140px;vertical-align : middle;" tabindex="0">' + full.Limit + '</span>';
}
},
{
"aTargets" : [ 3 ],
"bSortable" : true,
"sWidth" : "165px",
"searchable" : false,
"className": "dataFontSize",
"mRender" : function(data, type, full) {
return '<span style="padding-left:7px;width:165px;vertical-align : middle;" tabindex="0">' + full.test1Balance + '</span>';
}
},
{
"aTargets" : [ 4 ],
"bSortable" : true,
"sWidth" : "140px",
"searchable" : false,
"className": "dataFontSize",
"mRender" : function(data, type, full) {
return '<span style="padding-left:7px;width:140px;vertical-align : middle;" tabindex="0">' + full.test2Balance + '</span>';
}
},
{
"aTargets" : [ 5 ],
"bSortable" : true,
"sWidth" : "165px",
"searchable" : false,
"className": "dataFontSize",
"mRender" : function(data, type, full) {
return '<span style="padding-left:7px;width:140px;vertical-align : middle;" tabindex="0">' + full.Credit + '</span>';
}
},
{
"aTargets" : [ 6 ],
"sWidth" : "165px",
"className": "dataFontSize",
"bSortable" : false,
"searchable" : false,
"mRender" : function(data, type, full) {
var amount = full.Amount;
var myAmount = null
if(parseFloat(amount) == 0){
myAmount = '';
}
else {
myAmount = full.Amount;
}
var input_id = "childAmount_" + full.accountId;
if(clientLang.toUpperCase() == 'FR'){
return '<span style="width:150px;vertical-align : middle;" tabindex="0">' +
'<div class="input__field-container input__field-container--unit">' +
'<input type="search" size="20" style="text-align: right;" onchange="updateXXX(' + full.accountId + ', this.value);" onkeypress=" return fnXXX( event,this);" id="' + input_id + '" name="YYYAmount" value="' + myAmount + '"/>' +
'<div aria-hidden="true" class="input__unit input__unit--right">$</div>' +
'</div></span>';
}else{
return '<span style="width:150px;vertical-align : middle;" tabindex="0">' +
'<div class="input__field-container input__field-container--unit">' +
'<div aria-hidden="true" class="input__unit input__unit--left">$</div>' +
'<input type="search" size="20" style="text-align: right;" onchange="updateXXX(' + full.accountId + ', this.value);" onkeypress=" return fnXXX( event,this);" id="' + input_id + '" name="YYYAmount" value="' + myAmount + '"/>' +
'</div></span>';
}
}
}
],
"stripeClasses": [], //remove stripe classes
"language": {
"emptyTable": "<span tabindex='0'>"+loadingmessage+"</span>",
"sZeroRecords": "<span tabindex='0'>"+emptymessage+"</span>",
"sSearch": '',
"searchPlaceholder": placeHolder,
"paginate": {
"previous": prev,
"next": nex
}
},
"processing" : true,
"initComplete": function(settings, json){
//do nothing
},
"fnDrawCallback": function (oSettings) {
//do nothing
}
});
Answers
Is this the same question as this thread here?