Add custom column

gabriele90 · August 2014

Hi, i'm new to this forum and i want to begin to use datatables,
I've a simple question:
How i can add a custom column that contain a form and button who can redirect with a post action to an another page?

I'm using the last version of datatables and the data is retrived by an ajax request to mysql database.

Here is the script code:

$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "server_processing.php",
},
} );
} );

Thanks in advance.

lifedaniel · August 2014

{
                data: null,
                className: "center",
                defaultContent: '<center><a href="" class="editor_edit" title="Editer"><img src="images/edit.png" width="16" height="16" border="0"></a>&nbsp;<a href="" class="editor_view" title="Voir"><img src="images/view.png" width="16" height="16" border="0"></a>&nbsp;<a href="" class="editor_remove" title="Supprimer"><img src="images/delete.png" width="16" height="16" border="0"></a></center>'
            }

in the columns for exemple. This is a custom column

gabriele90 · August 2014

can you post a image for the full code? because this doesnt' work for me.

Thanks you

lifedaniel · August 2014

"columns": [
{
data: null,
className: "center",
defaultContent: 'your html code'
}
]

and don't forget to add the column to the HTML table

gabriele90 · August 2014

i've add a column with the class center but this dont' works for me ...

Below is the source:

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
            <th>Act</th>
                <th>Codice</th>
                <th>Descrizione</th>
                <th>QPC (Q.ta per collo)</th>
                <th>Cliente</th>
<th class="center">Action</th>

            </tr>
        </thead>
 
        <tfoot>
            <tr>
              <th>Act</th>
                 <th>Codice</th>
                <th>Descrizione</th>
                <th>QPC (Q.ta per collo)</th>
                <th>Cliente</th>
<th class="center">Action</th>
            </tr>
        </tfoot>
    </table>

thanks a lot

lifedaniel · August 2014

show me your javascript plz

gabriele90 · August 2014

Thanks for your answers below are the html and Javascript files


<html>
<head>


<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
</head>
<body>

<script>
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "server_processing.php",   },
                 
              
    } );
} );

</script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
            <th>Act</th>
                <th>Codice</th>
                <th>Descrizione</th>
                <th>QPC (Q.ta per collo)</th>
                <th>Cliente</th>

            </tr>
        </thead>
 
        <tfoot>
            <tr>
              <th>Act</th>
                 <th>Codice</th>
                <th>Descrizione</th>
                <th>QPC (Q.ta per collo)</th>
                <th>Cliente</th>

            </tr>
        </tfoot>
    </table>

</body>


</html>

if can help i post the server_processing.php below:


<?php
 
/*
 * DataTables example server-side processing script.
 *
 * Please note that this script is intentionally extremely simply to show how
 * server-side processing can be implemented, and probably shouldn't be used as
 * the basis for a large complex system. It is suitable for simple use cases as
 * for learning.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */
 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */
 
// DB table to use
$table = 'tbl_articoli';
 
// Table's primary key
$primaryKey = 'idArticolo';
 
// 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 simple
// indexes
$columns = array(
        
    array( 'db' => 'codice', 'dt' => 1 ),
    array( 'db' => 'descrizione',  'dt' => 2 ),
    array( 'db' => 'QPC',   'dt' => 3 ),
    array( 'db' => 'cliente',     'dt' => 4 ), 
);
 
// SQL server connection information
$sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'etichette',
    'host' => 'localhost'
);
 
 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */
 
require( 'ssp.class.php' );
 
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

allan · August 2014

I don't see any of @lifedaniel's suggestion in your above code. You might want to review the documentation for columns.defaultContent and also this Editor example which makes use of that method: https://editor.datatables.net/examples/simple/inTableControls.html

Allan

gabriele90 · August 2014

thanks you very much now it works

Add custom column

Add custom column

Answers

Howdy, Stranger!

Categories

DataTables

Add custom column

Add custom column

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables