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

jadeite1000jadeite1000 Posts: 9Questions: 7Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Is this the same question as this thread here?

This discussion has been closed.