TD scroll not working on table with server side processing?

mmcnair80

I have my report site setup with Scrollx: true. I also have a Dev site that is using server side processing as well as the Scrollx: true.

Since the Prod site is not using server side processing yet when the data for a <td> over flows there is a scroll bar added so that you can see it all and it doesn't overflow onto the rest of the <td>'s to the right of it.

With the Dev site, which is using server side processing the scroll bar does not show up. When there is too much data for the <td> it overflows into the <td>'s to the right.

How can I fix this so that even with server side processing I have the scrolling?

Prod

$(document).ready(function() {
  $('#DataTable').DataTable(      
  {
      "lengthMenu": [[25,50,75,100,150],[25,50,75,100,150]],
      "ScrollX": true,
      "dom": '<"top"iflp<"clear">>rt<"bottom"ip<"clear">>',
      "fixedHeader": { header: true, footer: false }
  });
});

Dev

$(document).ready(function ()
{
    $('#DataTable').DataTable(
  {
      "lengthMenu": [[25, 50, 75, 100, 150], [25, 50, 75, 100, 150]],
      "ScrollX": true,
      "dom": '<"top"Biflp<"clear">>rt<"bottom"ip<"clear">>',
      "buttons": [
            { extend: 'collection', text: 'Selection', buttons: ['selectAll', 'selectNone'] },
            { extend: 'collection', text: 'Export', buttons: ['excel', 'csv', 'pdf']}],
      "fixedHeader": { header: true, footer: false },
      "select": true,
      "processing": true,
      "serverSide": true,
      "ajax": { "url": "ServerSide.php?PageName=<?php echo $Page; ?>", "dataType": "json" }
  });
});

mmcnair80

Never mind I got this working by editing my modified version of the ssp.class.php file so that the data_output function now looks like this:

static function data_output($columns,$data)
{
    print_r($data);
    $DateFields = include 'DateFields.php';
    $out = array();
    for($i=0,$ien=count($data);$i<$ien;$i++)
    {
        $row = array();
        for($j=0,$jen=count($columns);$j<$jen;$j++)
        {
            $column = $columns[$j];
            if(isset($column['Formatter']))
            {
                echo "Formatter<br>";
                $row[$column['dt']] = $column['Formatter']($data[$i][$column['db']],$data[$i]);
            }
            else
            {       //This is were I added the <div> around the values to allow the scrolling to work in all browsers.            
                $row[$column['dt']] = "<div class='Scrollable'>" .$data[$i][$columns[$j]['db']]. "</div>";
                if(in_array($column['db'],$DateFields,TRUE) && $row[$column['dt']] != '')
                {
                    $row[$column['dt']] = substr($data[$i][$columns[$j]['db']],5,2) . "/" . substr($data[$i][$columns[$j]['db']],8,2) . "/" . substr($data[$i][$columns[$j]['db']],2,2);
                }
            }
        }
        $out[] = $row;
    }
    return $out;
}

I had to add a div inside the individual td so that the scroll would work.