Answers

• smileywar Posts: 18Questions: 3Answers: 1

  April 2015

  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 Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015

  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 Posts: 18Questions: 3Answers: 1

  April 2015 edited April 2015

  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 Posts: 18Questions: 3Answers: 1

  April 2015

  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 Posts: 18Questions: 3Answers: 1

  April 2015

  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 Posts: 18Questions: 3Answers: 1

  April 2015

  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 Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015

  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 Posts: 18Questions: 3Answers: 1

  April 2015

  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 Posts: 63,364Questions: 1Answers: 10,449 Site admin

  April 2015 Answer ✓

  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 Posts: 18Questions: 3Answers: 1

  April 2015

  Ahhh, that makes sense.

  Thank you every so much for your replies. :)

  Kind regards,
  Emmanuel.