How to subtract 2 columns?
http://imgur.com/a/wMOpc

thx

Your Datatables project is under MIT License and I am the maintainer of the sg/DatatablesBundle for the symfony framework https://github.com/stwe/DatatablesBundle . Now I would like to use your translation files content permanently in my project. I need a other file format (*.twig) and a other file name format (example: 'de.twig'). The copyright header remains unchanged! Is that OK?

Hey guys,

i have the following dataTable: https://jsfiddle.net/zukii/Lucq6vc5/

With the Buttons extension i hide some columns..

Is there any oppurtunity to also show only a special "Type"? For example if I click on "Privat" (top left corner) in the column "Type" only "Privat" is shown? Or if I click "Gewerbe" only "Gewerbe" is shown in the "Type"-column..?

that would be perfect.. i hope anybody can help

greetings

Hey guys,

i have a dataTable with the responsive extension and i have problems with long strings on the 2nd site (with pagination).

The responsive extension works pretty fine if the long string is on first site
watch the following fiddle: https://jsfiddle.net/zukii/m47qw2ss/3/

**but if the long string is on 2nd site, the responsive extension gets problems and goes over the container (the width is too large)! **
watch the following fiddle: https://jsfiddle.net/zukii/m47qw2ss/2/

is there any solution for this problem?

Hi All,
I am new to datatables, hence need help.
I have PHP page where Datatable is populated from MySQL Database. But when started to code for multi column search, for some reason it doe snot filter. I do get values from input controls but the Datatable is not re-drawn.
the code for same is is as follows
PHP

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "recruit";
$drawData = 1;

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

/* Database connection end */


// storing  request (ie, get/post) global array to a variable
$requestData= $_REQUEST;


$columns = array(
// datatable column index  => database column name
    0 =>'employee_name',
    1 => 'employee_salary',
    2=> 'employee_age',
    3=> 'id'
);

// getting total number records without any search
$sql = "SELECT employee_name, employee_salary, employee_age ";
$sql.=" FROM employee";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;  // when there is no search parameter then total number rows = total number filtered rows.


$sql = "SELECT employee_name, employee_salary, employee_age, id";
$sql.=" FROM employee WHERE 1=1";
if( !empty($requestData['search']['value']) ) {   // if there is a search parameter, $requestData['search']['value'] contains search parameter
    $sql.=" AND ( employee_name LIKE '".$requestData['search']['value']."%' ";
    $sql.=" OR employee_salary LIKE '".$requestData['search']['value']."%' ";

    $sql.=" OR employee_age LIKE '".$requestData['search']['value']."%' )";
}
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result.
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."  LIMIT ".$requestData['start']." ,".$requestData['length']."   ";
/* $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc  */
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");

$data = array();
while( $row=mysqli_fetch_array($query) ) {  // preparing an array
    $nestedData=array();

    $nestedData[] = $row["employee_name"];
    $nestedData[] = $row["employee_salary"];
    $nestedData[] = $row["employee_age"];
    $nestedData[] = $row["id"];

    $data[] = $nestedData;
}



$json_data = array(
            "draw"            => intval( $requestData['draw'] ),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
            "recordsTotal"    => intval( $totalData ),  // total number of records
            "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
            "data"            => $data   // total data array
            );

echo json_encode($json_data);  // send data as json format

the container HTML is

    <body>
        <div class="header"><h1>DataTable demo (Server side) in Php,Mysql and Ajax </h1></div>
        <table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
        <thead>
            <tr>
                <th>Target</th>
                <th>Search text</th>
                <th>Treat as regex</th>
                <th>Use smart search</th>
            </tr>
        </thead>
                            <tbody>
                        <tr id="filter_col1" data-column="0">
                            <td>Column - Name</td>
                            <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
                            <td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
                            <td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
                        </tr>
                        <tr id="filter_col2" data-column="1">
                            <td>Column - Salary</td>
                            <td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
                            <td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
                            <td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
                        </tr>
                        <tr id="filter_col3" data-column="2">
                            <td>Column - Age</td>
                            <td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
                            <td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
                            <td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
                        </tr>
                </tbody>
                </table>
        <div class="container">
            <table id="employee-grid" name="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                    <thead>
                        <tr>
                            <th>Employee name</th>
                            <th>Salary</th>
                            <th>Age</th>
                        </tr>
                    </thead>

            </table>
        </div>
    </body>

JS is as

            function filterColumn ( i ) {
                $('#employee-grid').DataTable().column( i ).search(
                    $('#col'+i+'_filter').val(),
                    $('#col'+i+'_regex').prop('checked'),
                    $('#col'+i+'_smart').prop('checked')
                ).draw();
            }
            $(document).ready(function() {
                var dataTable = $('#employee-grid').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    "ajax":{
                        url :"employee-grid-data-2.php", // json datasource
                        type: "post" ,   //,  // method  , by default get  ***SHIVANI*** uncomment the comma and remove semi colon to include error handling
                        error: function(){  // error handling
                            $(".employee-grid-error").html("");
                            $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                            $("#employee-grid_processing").css("display","none");

                        }
                    },
                    "columnDefs": [
                    {
                        "targets": [ 3 ],
                        "visible": false,
                        "searchable": false
                    }],
                     "aoColumnDefs": [
                     {
                       "aTargets": [ 0 ], // Column to target
                       "mRender": function ( data, type, full ) {
                         // 'full' is the row's data object, and 'data' is this column's data
                         // e.g. 'full[0]' is the comic id, and 'data' is the comic title
                         return '<a href="example_redirect.php?id=' + full[3] + '">' + data + '</a>';
                       }
                     }
                   ]
                } );
                // to fire multi column search
                $('input.column_filter').on( 'keyup click', function () {
                filterColumn( $(this).parents('tr').attr('data-column') );
                } );
            } );

What am I missing. I am not able to make any progress now.

I have a table with editor and I want that an only row can be selected for editing or row, so the CTRL or SHIFT keys don't allow to select more than one only row.
Is this possible?

Thanks a lot everyone.

I've got a huge list of elements in my table, about 9000 rows. Three of the columns in each row are select boxes, and when I select "Show all" in the entries select box, the table takes a few seconds to render. Is there a way to trigger the sProcessing message when the number of entries shown changes, so the user doesn't think the page froze?

High Level: I have a table that I am filtering, I want export buttons to include ALL data in the table, including what's filtered, including hidden columns.

It feels like all the articles I find are people leveraging AJAX and asking how they export data currently loaded + data that's unloaded. That is NOT my issue, I'm not using AJAX and the data is all encapsulated on the page. My initialization is fairly simple:

            var table = $('#table').DataTable({
                dom: 'Bfrtip',
                "aoColumnDefs": [
                    {
                        "aTargets": [0,1,2],
                        "bVisible": true,
                        "bSearchable": true
                    },
                    {
                        "aTargets": [3],
                        "bVisible": false,
                        "bSearchable": true
                    },
                    {
                        "aTargets": ['_all'],
                        "bVisible": false,
                        "bSearchable": false
                    }
                ],
                buttons: [
                    'csv', 'excelHtml5', 'pdf', 'print'
                ]
            });

My reading suggests TableTools would do this, but I don't have much interest in the deprecated and replaced tool. Can this be accomplished with Buttons? Hidden columns are included just fine, it's the currently filtered data I can't find a way to include.

Thanks!

Hi, here's a tough one for you:

I have a field which normally is numeric and must be unique when it is. But, on some occasions the user can create a record where the field value is set to "EXTRA".
Is it possible to validate:
1. Unique if it's a number.
2. If it's not a number the string must be exactly "EXTRA". But the value EXTRA needn't be unique.

I mean the Editor validation on the pphp side...

I have been using datatables for about a year with great results. The only issue that I have run into is when someone is adding one record after another through editor. For example, they add a new record using editor, then another, then another one right after another. Eventually, the editor throws an error and won't let it save without refreshing the page. Has anyone seen this and can you point me in the direction toward a solution?

I have a table where one of the columns is numbers only and sorting is ok. But in my case sometimes one of the entries appears as pending (string) and sorting becomes as string. Is there a way to force it ignore the string and put it in the bottom of the column?

Hi all, I am stumped on trying to use the Buttons extension from https://datatables.net/extensions/buttons/

Here is my setup. I have installed it by npm, and my html is sourcing these datatables related files, in this order:

datatables.net-bs/css/dataTables.bootstrap.css
datatables.net-buttons-bs/css/buttons.bootstrap.css

datatables.net/js/jquery.dataTables.js
datatables.net-bs/js/dataTables.bootstrap.js
datatables.net-buttons/js/dataTables.buttons.js
datatables.net-buttons-bs/js/buttons.bootstrap.js

I have tried all of the various methods to instantiate the buttons as described in the https://datatables.net/extensions/buttons/
What I see is an empty div gets created, with no buttons:

<div class="dt-buttons btn-group"></div>

Here is my current method of instantiating:

let table = $(this.table).DataTable(this.datatableOpts());
let buttons = new $.fn.dataTable.Buttons( table, {
    buttons: [ 'copy', 'csv', 'excel', 'pdf']
});
buttons.container().appendTo($(this.tableButtons));

Please let me know any suggestions or what I am overlooking. Thanks so much!

Hi I have a problem, when the result query is big my datatable loads very slow

$('#datatable-icons').dataTable( {
"processing": true,
"serverSide": true,
"deferRender": true,
"initComplete": function(settings, json) {
$(".btn").tooltip();
},
"ajax": {
"url": "....",
"type": "POST"
},
"columns": [
{ "data": "type" },
{ "data": "data1" },
{ "data": "data2" },
{ "data": "created" }
]
} );

Hello
I have a problem in one of my pages, where I get this error in the console_log.
"Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined"

I have other pages that display all the datatable options without problem. But this one.
All pages have the same include files (but for the specific js file).
This is a very simple page, with 2 tabs and small tables. I have been comparing the code line by line with a page where it works, and cannot find any difference.
Could somebody hint me where the problem might be so I can find it ? what gives this error in most cases ?
Thanks for the help
pat

Hi,

I am trying to give a css pop up on every row so that clients can add a 'comment' using facebook. At this point if I comment on row1 then it appears on every other row if I go to that row and click comment which opens a css popup and shows the comments.

I am tyring to follow this http://socialmouths.com/2012/02/16/add-facebook-comments-to-your-blog/

It all works until I add '<div data-href=”<?php the_permalink() ?>” data-num-posts=”10″ data-width=”550″></div>'. Then it breaks.

Has any one succesfully implement social plugins and if yes can you please share?

Thanks!

Regards,
Rajesh

I am using server-side processing to retrieve my data. I want to keep track of selection while going page to page & changing page length. I also want to set a limit to how many rows can be selected across all pages. All this while having the Select All/Deselect All button, & single select.

I am having trouble retaining the selection correctly from page to page as well as changing page length and showing swal (javascript alert) message when desire.

Issues encountered;
1. if selection limit is 10 & 10 rows are selected on the first page, you go to page another page and come back to page 1, the limit logic is entered...this should not happen.
2. if page length is 25 and selection limit is 10, you click select all, 10 rows are selected but when you click deselect all, the deselect logic is ran and it subtracts from the sum amount numbers that are not supposed to be subtracted.

Hopefully what I am saying makes sense. Any advice on logic, how I should track selection, sum amount for each row...anything will help!

here is my code

notClaimedTable
    .on( 'select', function ( e, dt, type, indexes ) {
        var limitReached = false;
            notClaimedTable.rows( indexes ).every( function ( rowIdx, tableLoop, rowLoop ) {
                    var rowId = notClaimedTable.row(rowIdx).id();
                    var amountCell = notClaimedTable.cell({ row: rowIdx, column: 4 }).node();
                        var currentAmount = math.format(math.eval(amountCell.outerText));
                    if(selectedNotClaimedPaymentIds.length >= claimLimit){
                        if( $.inArray(rowId, selectedNotClaimedPaymentIds) == -1 ){
                            $('#'+rowId).removeClass('selected');
                        }
                        limitReached = true;
                    }else {
                        // if id is not in array, then add
                        if( $.inArray(rowId, selectedNotClaimedPaymentIds) == -1 ){
                            recalculateAndPushOnSelect(rowId, currentAmount);
                            totalRows( selectedNotClaimedPaymentIds.length, sumAmount );
                        }
                    }
            });
        if(limitReached && !hollaBack){
            swal(
              'Maximum Number of Gifts Reached',
              'You can only select up to a max of 1,000 gifts at a time. You must claim the selected gifts first to continue.',
              'warning'
            );
        }
    } )
    .on( 'deselect', function ( e, dt, type, indexes ) {
        // console.log( 'notClaimedTable.on(deselect) | '+ selectedNotClaimedPaymentIds.length+' > '+claimLimit);
        console.log('deselect fired');
        console.log(selectedNotClaimedPaymentIds.length);
        notClaimedTable.rows( indexes ).every( function ( rowIdx, tableLoop, rowLoop ) {
            var rowId = notClaimedTable.row(rowIdx).id();
            var amountCell = notClaimedTable.cell({ row: rowIdx, column: 4 }).node();
                var currentAmount = math.format(math.eval(amountCell.outerText));
            sumAmount = math.subtract(sumAmount, currentAmount);
            // Remove Id from array
            var index = selectedNotClaimedPaymentIds.indexOf(rowId);
            if (index > -1) { selectedNotClaimedPaymentIds.splice(index, 1); }
        });
        totalRows( selectedNotClaimedPaymentIds.length, sumAmount );

        // if (typeof selectedNotClaimedPaymentIds !== 'undefined' && selectedNotClaimedPaymentIds !== null) {
        //     console.log('selectedNotClaimedPaymentIds[]: '+selectedNotClaimedPaymentIds);
        // }else{
        //     console.log('selectedNotClaimedPaymentIds[]: empty');
        // }
    });

"rowCallback": function( row, data, index ) {
    if ( $.inArray(data.Id, selectedNotClaimedPaymentIds) !== -1 ) {
        hollaBack = true;
        notClaimedTable.row('#'+data.Id).select();
    }
    if(index == notClaimedTable.page.len()){
        hollaBack = false;
    }
},

I have the loading image and message working, however it displays in the toolbar area of the table. How can I get it to display lower, in the body section? Also, the image is an animated gif, why does it seem to only spin once and not continuous? as if something prevents it from looping over and over.

I wrote some code to manage server processing with Django and ForeignKey fields as well.
This is the solution I made up, I hope that this code will be usefull for someone else.

https://github.com/peppelinux/Django-Datatables-server-processing

Ciao

EDIT: I think I solved it. Can't find the delete key for posts here, though!

Hello,

I get following error since Update:

[02-Jan-2017 18:53:19 Europe/Berlin] PHP Notice:  Undefined index: decimal in app/libs/Editor/php/Editor/Validate.php on line 438
[02-Jan-2017 18:53:19 Europe/Berlin] PHP Notice:  Undefined index: decimal in app/libs/Editor/php/Editor/Validate.php on line 473
[02-Jan-2017 18:53:19 Europe/Berlin] PHP Notice:  Undefined index: decimal in app/libs/Editor/php/Editor/Validate.php on line 474

Thanks!

Cheers
Hannes