Pagination - Navigation with text input

Pagination - Navigation with text input

dnzone88dnzone88 Posts: 5Questions: 0Answers: 0
edited August 2009 in Plug-ins
Hello, I'm still very new to jQuery, so i need some help.
I would like to modify the Navigation with text input plug in and change the First, Last, Previous, Next button to image file just like the two_button pagination type. Can anyone help me on this. Thanks

dennis,

Replies

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi dennis,

    Have you had a hack at this yet? It should be just a case of combining the source for the standard DataTables paging functions with the input plug-in.

    Regards,
    Allan
  • dnzone88dnzone88 Posts: 5Questions: 0Answers: 0
    hello allan, thanks for the fast reply, i did try n modify the plug-in but when i run the code. the image did not display. can u check on my code see where i did wrong. i split the code into 2 part because its too big to fit in.
    [code]
    "fnInit": function ( oSettings, fnCallbackDraw )
    {
    var nPaging = oSettings.anFeatures.p;
    oSettings.nFirst = document.createElement( 'div' );
    oSettings.nPrevious = document.createElement( 'div' );
    oSettings.nNext = document.createElement( 'div' );
    oSettings.nLast = document.createElement( 'div' );
    var nInput = document.createElement( 'input' );
    var nPage = document.createElement( 'span' );
    var nOf = document.createElement( 'span' );

    if ( oSettings.sTableId !== '' )
    {
    nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
    oSettings.nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
    oSettings.nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
    oSettings.nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
    oSettings.nLast.setAttribute( 'id', oSettings.sTableId+'_last' );
    }

    oSettings.nFirst.className = "paginate_disabled_first";
    oSettings.nPrevious.className = "paginate_disabled_previous";
    oSettings.nNext.className="paginate_disabled_next";
    oSettings.nLast.className = "paginate_disabled_last";
    nOf.className = "paginate_of";
    nPage.className = "paginate_page";

    nInput.type = "text";
    nInput.style.width = "15px";
    nInput.style.display = "inline";
    nPage.innerHTML = "Page ";

    nPaging.appendChild( oSettings.nFirst );
    nPaging.appendChild( oSettings.nPrevious );
    nPaging.appendChild( nPage );
    nPaging.appendChild( nInput );
    nPaging.appendChild( nOf );
    nPaging.appendChild( oSettings.nNext );
    nPaging.appendChild( oSettings.nLast );

    $(oSettings.nFirst).click( function () {
    oSettings._iDisplayStart = 0;
    fnCallbackDraw( oSettings );
    } );

    $(oSettings.nPrevious).click( function() {
    oSettings._iDisplayStart -= oSettings._iDisplayLength;

    /* Correct for underrun */
    if ( oSettings._iDisplayStart < 0 )
    {
    oSettings._iDisplayStart = 0;
    }

    fnCallbackDraw( oSettings );
    } );

    $(oSettings.nNext).click( function() {
    /* Make sure we are not over running the display array */
    if ( oSettings._iDisplayStart + oSettings._iDisplayLength < oSettings.fnRecordsDisplay() )
    {
    oSettings._iDisplayStart += oSettings._iDisplayLength;
    }

    fnCallbackDraw( oSettings );
    } );

    $(oSettings.nLast).click( function() {
    var iPages = parseInt( (oSettings.fnRecordsDisplay()-1) / oSettings._iDisplayLength, 10 ) + 1;
    oSettings._iDisplayStart = (iPages-1) * oSettings._iDisplayLength;

    fnCallbackDraw( oSettings );
    } );

    $(nInput).keyup( function (e) {

    if ( e.which == 38 || e.which == 39 )
    {
    this.value++;
    }
    else if ( (e.which == 37 || e.which == 40) && this.value > 1 )
    {
    this.value--;
    }

    if ( this.value == "" || this.value.match(/[^0-9]/) )
    {
    /* Nothing entered or non-numeric character */
    return;
    }

    var iNewStart = oSettings._iDisplayLength * (this.value - 1);
    if ( iNewStart > oSettings.fnRecordsDisplay() )
    {
    /* Display overrun */
    oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay()-1) /
    oSettings._iDisplayLength)-1) * oSettings._iDisplayLength;
    fnCallbackDraw( oSettings );
    return;
    }

    oSettings._iDisplayStart = iNewStart;
    fnCallbackDraw( oSettings );
    } );

    /* Take the brutal approach to cancelling text selection */
    $('span', nPaging).bind( 'mousedown', function () { return false; } );
    $('span', nPaging).bind( 'selectstart', function () { return false; } );
    $(oSettings.nFirst).bind( 'selectstart', function () { return false; } );
    $(oSettings.nPrevious).bind( 'selectstart', function () { return false; } );
    $(oSettings.nNext).bind( 'selectstart', function () { return false; } );
    $(oSettings.nLast).bind( 'selectstart', function () { return false; } );


    oSettings.nPagingOf = nOf;
    oSettings.nPagingInput = nInput;
    },

    [/code]
  • dnzone88dnzone88 Posts: 5Questions: 0Answers: 0
    the second part of the code is below.
    [code]
    "fnUpdate": function ( oSettings, fnCallbackDraw )
    {
    if ( !oSettings.anFeatures.p )
    {
    return;
    }

    var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
    var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;

    oSettings.nPagingOf.innerHTML = " of "+iPages
    oSettings.nPagingInput.value = iCurrentPage;

    oSettings.nFirst.className =
    ( oSettings._iDisplayStart === 0 ) ?
    "paginate_disabled_first" : "paginate_enabled_first";

    oSettings.nPrevious.className =
    ( oSettings._iDisplayStart === 0 ) ?
    "paginate_disabled_previous" : "paginate_enabled_previous";

    oSettings.nNext.className =
    ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ?
    "paginate_disabled_next" : "paginate_enabled_next";

    oSettings.nLast.className =
    ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ?
    "paginate_disabled_last" : "paginate_enabled_last";

    }
    };
    [/code]
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi dennis,

    Thanks for pasting in your code. I just tried it exactly as you pasted and the images show up okay for me. Have you got Firebug (or similar) handy? It might be worth checking to see if the css image paths are okay.

    Regards,
    Allan
  • dnzone88dnzone88 Posts: 5Questions: 0Answers: 0
    hello allan.

    Thanks for the help. As i have found out the code is working just that i have put the worng extension for the image in the css file. So sorry about that. Thanks anyway.
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Hi dennis,

    No problem - good to hear you got it sorted in the end :-)

    Regards,
    Allan
This discussion has been closed.