Loading 12mb

smileywar

Hi, I purchased a license a couple of days ago. And very happy with it.

On my test environment, I have no problems loading 12mb (13k rows)

On my clients server which is not as high spec as mine, I have problems. Can't load beyond 4.4mb. I can increase the executing time. But this is really slow.

How can I let it load dynamically or like 1k at a time and flush the memory.

I did a test with ssp.class.php did a join with 4 other tables, and the loading speed was very quick.

However using join.php template is just very very slow.

Any help would be great, please push me in the correct direction.

smileywar

btw, if the join function is important below is what I have done.

->leftJoin( 'sw_gm_prices', 'sw_gm_prices.feed_id', '=', 'sw_gm_feed.id' )
->leftJoin( 'sw_gm_shipping_prices', 'sw_gm_shipping_prices.feed_id', '=', 'sw_gm_feed.id' )

allan

Are you using server-side processing? If not I would suggest enabling it! Example here.

12MB of data is a huge amount for a single page :-). Server-side processing should split it up nicely.

Regards,
Allan

smileywar

Hi Allan,

Yes it is server side, am I doing something wrong?

editor = new $.fn.dataTable.Editor( {
    ajax: "sw/load/ld-edit-table.php",
    table: "#products",
    fields: [ 
        {
            label: "ID:",
            name: "sw_gm_feed.gm_id",
            type: "readonly"
        }, {
            label: "Title:",
            type:  "textarea",
            name: "sw_gm_feed.title"
        }, {
            label: "Description:",
            type:  "textarea",
            name: "sw_gm_feed.description"
        }, {
            label: "Availability:",
            name: "sw_gm_feed.availability",
            type: "select",
            options: [
                 { label: "In Stock", value: "in stock" },
                 { label: "Out of Stock", value: "out of stock" }
            ]
        }, {
            label: "Price:",
            name: "sw_gm_prices.price"
        }, {
            label: "Price:",
            name: "sw_gm_shipping_prices.shipping_price"
        }
    ]
} );

$('#products').dataTable( {
    dom: "Tfrtip",
    ajax: {
        url: "sw/load/ld-edit-table.php",
        type: 'POST'
    },
    stateSave: true,
    columns: [
        {
            data: null,
            defaultContent: '<input type="checkbox" class="selected" />',
            width: '50px'
        },
        {
            "class":"thumb-loading",
            "targets": 0,
            "data": "sw_gm_feed.image",
            "render": function ( data, type, full, meta ) {
              return '<img class="thumb" src="'+data+'">';
            }
          },
        { data: "sw_gm_feed.gm_id", "class":"gm_id" },
        { data: "sw_gm_feed.title" },
        { data: "sw_gm_feed.description" },
        { data: "sw_gm_feed.availability" },
        { data: "sw_gm_prices.price" },
        { data: "sw_gm_shipping_prices.shipping_price" },
        {
            data: null,
            defaultContent: '<button type="button" class="btn btn-primary edit"><i class="fa fa-pencil"></i></button> <button type="button" class="btn btn-secondary delete"><i class="fa fa-trash-o"></i></button>',
            width: '100px'
        }
    ],
    tableTools: {
        sRowSelect: "os",
        aButtons: [
            { sExtends: "editor_edit",  sButtonText: "Quick Editing", editor: editor }
        ]
    }
} );

the php file

// DataTables PHP library
include( "../../bootstrap/php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Validate;

Editor::inst( $db, 'sw_gm_feed' )
->field( 
    Field::inst( 'sw_gm_feed.gm_id' ),
    Field::inst( 'sw_gm_feed.title' ),
    Field::inst( 'sw_gm_feed.description' ),
    Field::inst( 'sw_gm_feed.image' ),
    Field::inst( 'sw_gm_feed.availability' ),
    Field::inst( 'sw_gm_prices.price' )->validator( 'Validate::numeric' ),
    Field::inst( 'sw_gm_shipping_prices.shipping_price' )->validator( 'Validate::numeric' )
)
->leftJoin( 'sw_gm_prices', 'sw_gm_prices.feed_id', '=', 'sw_gm_feed.id' )
->leftJoin( 'sw_gm_shipping_prices', 'sw_gm_shipping_prices.feed_id', '=', 'sw_gm_feed.id' )
->process($_POST)
->json();

smileywar

I just notice, I mist out on serverSide: true,

But than I get the following error

DataTables warning: table id=products - Unknown field: (index 0)

Sorry for the nooby questions.

smileywar

Ok, so I now know it's because the editor does not match, as I have added a custom checkbox column, I'm trying to figure out how to get the editor to play nice? Can I assign an empty field?

smileywar

Hi, Last question :)

I have gone through my coding and did it step by step.

I found that I moved my checkbox to the last column, that it works. Why is that?
As I would like to understand what i'm doing wrong. But it works now, loads in seconds, not minutes :D

$('#products').dataTable( {
    dom: "Tfrtip",
    ajax: {
        url: "sw/load/ld-edit-table.php",
        type: 'POST'
    },
    serverSide: true,
    stateSave: true,
    columns: [

        {
            "class":"thumb-loading",
            "targets": 0,
            "data": "sw_gm_feed.image",
            "render": function ( data, type, full, meta ) {
              return '<img class="thumb" src="'+data+'">';
            }
          },
        { data: "sw_gm_feed.gm_id", "class":"gm_id" },
        { data: "sw_gm_feed.title" },
        { data: "sw_gm_feed.description" },
        { data: "sw_gm_feed.availability" },
        { data: "sw_gm_prices.price" },
        { data: "sw_gm_shipping_prices.shipping_price" },
        {
            data: null,
            defaultContent: '<button type="button" class="btn btn-primary edit"><i class="fa fa-pencil"></i></button> <button type="button" class="btn btn-secondary delete"><i class="fa fa-trash-o"></i></button>',
            width: '100px'
        },
        {
            data: null,
            defaultContent: '<input type="checkbox" class="selected" />',
            width: '50px'
        }
    ],
    tableTools: {
        sRowSelect: "os",
        aButtons: [
            { sExtends: "editor_edit",  sButtonText: "Quick Editing", editor: editor }
        ]
    }
} );

allan

You are getting the error:

DataTables warning: table id=products - Unknown field: (index 0)

on the checkbox column because of:

data: null,

i.e. there is no data associated with that column on the server-side. Given that it is a client-side input there probably shouldn't be, so the correct thing to do would be to use columns.orderable to disable the ability to order on that column.

Allan

smileywar

That did not seem to work, I disabled the checkbox sorting.

But it's ok I simple moved it to the last column. I love your app, it's making my APP's capabilities so much better and nicer.

Thank you for such a great tool!

allan

If the checkbox is in the first column you would also need to change the default ordering which is controlled by order.

I love your app

:-D

Allan

smileywar

Ahhh, that makes sense.

Thank you every so much for your replies. :)

Kind regards,
Emmanuel.