Serverside Processing Question

Zaickz

Hello Forum Member,

First of all, sorry for my bad English.
im using DataTables for a small Spareparts Stocksystem.
And i wanna add an Ordersystem to send an Email to our Salesman.

I need to add a Button with an Event "onclick=addtoCart('row_id')" i need to get the row_id.

I tried to modify the Serverside example but i wont get the result i need.

id-objects.php

// DB table to use
$table = 'shop';
 
// Table's primary key
$primaryKey = 'sID';
 
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier - in this case object
// parameter names
$columns = array(
    array(
        'db' => 'sID',
        'dt' => 'DT_RowId',
        'formatter' => function( $d, $row ) {
            // Technically a DOM id cannot start with an integer, so we prefix
            // a string. This can also be useful if you have multiple tables
            // to ensure that the id is unique with a different prefix
            return 'row_'.$d;
        }
    ),
    array( 'db' => 'articlenumber', 'dt' => 'articlenumber' ),
    array( 'db' => 'manunumber',  'dt' => 'manunumber' ),
    array( 'db' => 'manufactor',   'dt' => 'manufactor' ),
    array( 'db' => 'description',   'dt' => 'description' ),
    array( 'db' => 'machine',   'dt' => 'machine' )
); 

shop.php

<div class="card shadow mb-4">
            <div class="card-header py-3">
              <h6 class="m-0 font-weight-bold text-primary">Bestellen</h6>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                  <thead>
                    <tr>
                      <th>Artikelnummer</th>
                      <th>Herstellernummer</th>
                      <th>Hersteller</th>
                      <th>Beschreibung</th>
                      <th>Maschinenteil</th>
                      <th>Anzahl</th>
                      <th>Hinzufügen</th>
                    </tr>
                  </thead>
                  <tbody>
            </tbody>
            </table>
            </div>
            </div>
          </div>

JS inside shop.php:

$(document).ready(function() {
    $('#dataTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "ids-objects.php",
        "columns": [
            { "data": "articlenumber" },
            { "data": "manunumber" },
            { "data": "manufactor" },
            { "data": "description" },
            { "data": "machine" },
            {"data": null, "defaultContent": "<input class='form-control' id='unit' type='text' name='unit' value='0'></input>"},
            {"data": "DT_RowId","render":function  //<- Here i tried to add a button like above but it wont work
            }}
        ]
    } );
} );

Maybe you have a food for thought.

Greetings,
Zaickz

If someone dont understand my problem i will try to explain it a bit better

allan

Hi Zaickz,

You should be able to do this:

$(document).ready(function() {
    var table = $('#dataTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "ids-objects.php",
        "columns": [
            { "data": "articlenumber" },
            { "data": "manunumber" },
            { "data": "manufactor" },
            { "data": "description" },
            { "data": "machine" },
            {"data": null, "defaultContent": "<input class='form-control' id='unit' type='text' name='unit' value='0'></input>"},
            {"data": "DT_RowId", defaultContent: '<button class="addToCart">Add to cart</button>' }
        ]
    } );

    $('#dataTable').on('click', 'tbody button.addToCart', function () {
        var id = table.row(this).id();
        alert('Clicked row id = ' + id);
    } );
} );

Note that I've used a jQuery event handler rather than a DOM0 one. I'd suggest staying away from DOM0 (e.g. onclick) event handlers.

Allan

Zaickz

Thanks for your answer.

Now i only have the text "row_xxx" in my column no button.

The Button will only appear when there is no data,right ?

kthorngren

Here are a couple examples of buttons that may help:

Uses columns.render:
http://live.datatables.net/qemodapi/1/edit

Uses defaultContent:
http://live.datatables.net/xijecupo/1/edit

Kevin