Horizontal Scrolling Problem

Horizontal Scrolling Problem

jewel03csejewel03cse Posts: 11Questions: 0Answers: 0
edited September 2010 in General
I am using data table with record consisting of more than 10 fields. I want to use horizontal scrolling
in the data table. I have attached following css files and jquery files. I have initialized data table
plugin as below.







//<-- code for initialization only ->
pharmacistTable=$('#pharmacistListTable').dataTable({
"bFilter": false, "bJQueryUI":true,
"bSort":false, "bInfo": true,
"bPaginate": true, "bSortClasses":true,
"bProcessing":true, "bServerSide": true,
"sAjaxSource": "pharmacistProcessing.php",
"sScrollX": "100",
"sScrollXInner": "110%",
"bScrollCollapse": true,

"fnDrawCallback":function(){},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {},
"fnServerData": function ( sSource, aoData, fnCallback )
{},
"aoColumns":[]

});


Problem: Horizontal scroll is not appearing. Even no effect is occurring.
Questions: Whats wrong with initialization code? Why is horizontal scrolling not appearing?

please, respond to me?

Replies

  • allanallan Posts: 63,400Questions: 1Answers: 10,452 Site admin
    The problem is probably the fnServerData function - it's not requesting data from the server, nor is it giving any data to DataTables to draw - therefore with no data to display (actually I would imagine that you are getting a Javascript error...) no scrolling is required. If you don't want fnServerData to do anything just remove it, or you can have it do what is needed like this: http://datatables.net/examples/server_side/post.html

    Allan
  • jewel03csejewel03cse Posts: 11Questions: 0Answers: 0
    Sorry, I did not able to make you clear about my problem with the above skeleton code. Actually, I am fetching data from server side processing using data table plugin and it is working fine. Hence, I did not paste the code of the fnDrawCallback(), fnRowCallback() and fnServerData( ) functions. My problem is that I can not set the horizontal scroller to display more fields though I have used "sScrollX": "100%", "sScrollXInner": "110%" and "bScrollCollapse": true options.

    Full code is given below.

    HTML Table Code:




    PhamacistId
    SL
    Title
    Surname
    First_Name
    Year_of_Reg
    PC_Reg_No
    PSGH_Reg_No
    Practice_Area
    Employer
    Address_1
    Address_2
    District
    Town
    Country
    Status






    Java script code:
    pharmacistTable=$('#pharmacistListTable').dataTable({
    "bFilter": false, "bJQueryUI":true,
    "bSort":false, "bInfo": true,
    "bPaginate": true, "bSortClasses":true,
    "bProcessing":true, "bServerSide": true,
    "sAjaxSource": "pharmacistProcessing.php",
    "sScrollX": "100%",
    "sScrollXInner": "110%",
    "bScrollCollapse": true,
    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
    $(nRow).attr('id',aData[0]);
    return nRow;
    },
    "fnServerData": function ( sSource, aoData, fnCallback )
    { aoData.push({"name":"operation", "value":"pharmacistListFetch"});
    $.ajax({ "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": aoData,
    "success": fnCallback
    });
    },
    "aoColumns":[ { "bVisible": false},
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null
    ]
    });//end of dataTable()
  • jewel03csejewel03cse Posts: 11Questions: 0Answers: 0
    PHP code:

    case 'pharmacistListFetch':
    if($connect = @mysql_connect(HOSTNAME,DBUSER,DBPWD))
    { if(@mysql_select_db(DBNAME,$connect))
    {

    $sLimit = "";
    if(isset($_POST['iDisplayStart']))
    { $sLimit = "limit ".mysql_real_escape_string( $_POST['iDisplayStart'] ).", ".
    mysql_real_escape_string( $_POST['iDisplayLength'] );
    }

    $sql="select count(PhamacistId) as C from t_pharmacist;";
    $qr= mysql_query($sql,$connect);
    $r= mysql_fetch_object($qr);
    $total=$r->C;

    echo '{"sEcho":'.intval($_POST['sEcho']).',"iTotalRecords":'.$total.',"iTotalDisplayRecords":'.$total.', "aaData":[';

    $sql="select PhamacistId, Title, Surname, First_Name, Year_of_Reg, PC_Reg_No, PSGH_Reg_No, Practice_Area,";
    $sql.=" Employer, Address_1, Address_2, District, Town, Country, Status ";
    $sql.=" from t_pharmacist order by PhamacistId $sLimit;";

    $qr=mysql_query($sql,$connect);
    $f=0;
    $serial=0;
    $serial=$_POST['iDisplayStart']+1;

    while($q=mysql_fetch_object($qr))
    { if($f++) echo ',';

    echo '["'.htmlspecialchars($q->PhamacistId).'","'.$serial++.'","'.htmlspecialchars($q->Title).'","'.htmlspecialchars($q->Surname).'","'.htmlspecialchars($q->First_Name).'","'.htmlspecialchars($q->Year_of_Reg).'","'.htmlspecialchars($q->PC_Reg_No).'","'.htmlspecialchars($q->PSGH_Reg_No).'","'.htmlspecialchars($q->Practice_Area).'","'.htmlspecialchars($q->Employer).'","'.htmlspecialchars($q->Address_1).'","'.htmlspecialchars($q->Address_2).'","'.htmlspecialchars($q->District).'","'.htmlspecialchars($q->Town).'","'.htmlspecialchars($q->Country).'","'.htmlspecialchars($q->Status).'" ]';

    }//end while()

    echo '] }';

    }//end of
    }//end of

    break;

    I have also attached following files:







    Now, what's wrong in my coding?
  • allanallan Posts: 63,400Questions: 1Answers: 10,452 Site admin
    Nothing that I can see that is obvious :-). Can you post a link to an example please, that should make it possible to see what is going on.

    Allan
  • jewel03csejewel03cse Posts: 11Questions: 0Answers: 0
    Please, see http://www.softworksbd.com/p/index.php
    and 2nd comment of mine.
  • allanallan Posts: 63,400Questions: 1Answers: 10,452 Site admin
    Hi jewel03cse,

    It looks like you are using DataTables 1.6 ( http://www.softworksbd.com/p/js/jquery.dataTables.min.js ), which is the problem. Scrolling was only added in 1.7 ( http://datatables.net/new/1.7 ). Try upgrading your copy and hopefully it will "just work" :-)

    Allan
  • jewel03csejewel03cse Posts: 11Questions: 0Answers: 0
    Thanks a lot to you, Allan. Now, its completely ok.
  • x2austinx2austin Posts: 1Questions: 0Answers: 0
    I have a slightly different problem. When the following code is executed, the scrollbar appears but the header disappears.
    Thanks in advance.

    //var html is initialized on demand
    $('#tableFilterContainer').empty();
    $('#tableFilterContainer').append($(html));
    $('#return').dataTable({
    "sScrollX": "100%",
    "sScrollXInner": "110%"
    });


    'return' is the id of the table appended. I tried making the containing div scrollable (overflow-x:scroll) and the same thing happens.
  • nickolojonnickolojon Posts: 20Questions: 0Answers: 0
    [quote]x2austin said: I have a slightly different problem. When the following code is executed, the scrollbar appears but the header disappears.

    Thanks in advance.



    //var html is initialized on demand

    $('#tableFilterContainer').empty();

    $('#tableFilterContainer').append($(html));

    $('#return').dataTable({

    "sScrollX": "100%",

    "sScrollXInner": "110%"

    });





    'return' is the id of the table appended. I tried making the containing div scrollable (overflow-x:scroll) and the same thing happens.[/quote]


    Hi , all i also encountered the same problem, need help! thanks in advance
  • adromiladromil Posts: 53Questions: 4Answers: 0
    I am also having the same problem.
    all the column headers are not aligned on the column data
    you may check it on the #tblcontacts table uploaded on the DataTables debugger
    http://debug.datatables.net/adarev

    Thank you very much
This discussion has been closed.