i have two datatables in my page. when first tale loading and drawing.the page has not scroll bar.table header caculated a width for header table. then second table loading and drawing. the srocll bar come out. because the table body of first table is auto width, that is fine. but table header is caculated number. so it would meet problem.

In particular, Django REST framework. I have not problem getting data into the datatable however cannot get the editor buttons to work ("create", "edit", "delete"). At this stage I'm only using the trial editor package to see if suitable, does this have restrictions that prevent these functions?

I have tried several things and they seem to overlap when I select search on one:-

_initComplete : function($table) {
//var input = $('.dataTables_filter input').unbind(),
var input = $table.unbind();
self = $table.api(),
$searchButton = $('<button>')
.text('Search')
.click(function() {
self.search(input.val()).draw();
}),
$clearButton = $('<button>')
.text('Clear')
.click(function() {
input.val('');
$searchButton.click();
})
//$('.dataTables_filter').append($searchButton, $clearButton);
$table.append($searchButton, $clearButton);

    //failed attempts to add using the table ids.
    //$table.attr("id", "non_validated_list").append($searchButton, $clearButton)
    //$("#vendor_list").append($searchButton, $clearButton);
    //$("#non_validated_list").append($searchButton, $clearButton);

Any Ideas?

He there,

I am using Editor and would like to add a computed value to the JSON string for being displayed in the table. It just needs to be displayed in the table - there is no need for saving it in the Database (there is no corresponding field in the Database ;-)).

How can I add such a computed value to the JSON string with Editor?

Thanks in advance!

I never noticed this until I actually needed to sort by a date. All my dates are in USA format (dd/mm/yyyy) but sort as they are strings. From what I read in various forum answers, I was under the impression that DataTables automatically recognized this as a date format. See screenshot for example.

This is all the code I have. Let's say the date column is column 5. How would I force recognition of that column as a date column so that it sorts as a date and not a string?

$(() => {
            $(".display").DataTable({
                dom: 'Bfrtip',
                scrollX:true,
                buttons: [{
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
                    }
                }]
            });
        });

Hello,

I’m using the “Individual column searching (text inputs)” explained in

https://datatables.net/examples/api/multi_filter.html

but I have a problem.

When I change page and later come back, the values written inside the input controls are not displayed. The filters work (i.e. the columns contain only the filtered results), but the searched words are not visibile. The global Search is instead populated.

In DataTable constructor I set:

  `stateDuration: -1, //-1 means session storage
  `stateSave: true, 

and

    `initComplete: function () {
    `var r = $('#myTableId tfoot tr');
      `r.find('th').each(function(){
        `$(this).css('padding', 8);
      `});
      `$('#myTableId thead').append(r);
      `$('#search_0').css('text-align', 'center');

      `var api = this.api();

      `// Apply the search
      `api.columns().every(function() {
        `var that = this;       
        `$('input', this.footer()).on('keyup change', function() {
          `if (that.search() !== this.value) {
            `that.search(this.value).draw();
          `}
            `});
        `});
     `},

Could anyone help me figure out where I'm wrong?

Thanks in advance, Leonardo

While injecting datatables and datatables.buttons in angular.module like this
angular.module('myApp',['datatables', 'datatables.buttons']) I get Uncaught Error: [$injector:modulerr] in console
I do not see any other error and I have added all dependencies in my vendor folder and copied on to master.dust which is the common html template for all html files
My code is as below

angular.module('myApp',['datatables', 'datatables.buttons'])
    .controller('ViewCtrl', function ($scope, $state, $filter, sharedServices, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $q, $stateParams, $sce, $interval, $uibModal) {
       $scope.dtOptions = DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(2)
        .withDOM('pitrfl')
        .withButtons([{
                extend: 'excelHtml5',
            }
        ]);

And the dependencies are:

<script src="{context.links.resourceBaseUrl|s}/vendor/datatables/js/jquery.dataTables.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables.net-bs/dataTables.bootstrap.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables.net-bs/dataTables.bootstrap.min.js"></script>


<script src="{context.links.resourceBaseUrl|s}/vendor/datatables/angular-datatables/angular-datatables.min.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables-responsive/dataTables.responsive.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/angular/angular.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables/angular-datatables/angular-datatables.min.js"></script> 

<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/dataTables.buttons.min.js"></script>

<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.colVis.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.flash.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/jszip/jszip.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.html5.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.print.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables/angular-datatables/plugins/buttons/angular-datatables.buttons.min.js"></script>

Kindly help

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hi
I have two input cells in a toolbar to search in two hidden columns 5 and 6 of my datatable. I have inline editing on my rows. After ended inline editting the row blurs. Then I click on my input search field and start writing in this field, but my typing goes into the cell I've just edited. The only way I've found to fix it is to update (F5) and then write in my input field. Filtering works fine from the input field.

The code for filtering is:

<script> 

function filterColumn ( i ) {
            $('#example').DataTable().column( i ).search(//filtrer funktion for lærer og for hold
            $('#col'+ i +'_filter').val()).draw();//er en id reference, der skifter med i, col5_filter og col6_filter bruges. Er id på input cellerne for henholdsvis lærer og hold
            }

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {.........

The html and keyup functions for searcing in the two hidden columns is inside a initComplete:

var table = $('#example').DataTable( { // DataTable styrer hvordan tabel ser ud. Modsat ready( Editor), der styrer edit og new
    
    fnInitComplete: function(){
            $('div.toolbar').html('<tr><td> Lærer: </td><td align="center"><input type="text" class="column_filter" id="col5_filter"></td><td> Hold: </td><td align="center"><input type="text" class="column_filter" id="col6_filter"></td></tr>');//toolbar
            $('input.column_filter').on( 'keyup', function () {//filtrer lærer
            filterColumn( 5 );
            } );
            $('input.column_filter').on( 'keyup', function () {//filtrer hold
            filterColumn( 6 );
            } );//input cellerne har samme class: "column_filter", kolonne styres af i
         },
......

Any ideas ?

Claus

Hello, I have a screen where I have a search button that refresh the page and a switch on/off that activates an autoload of my DataTable, what I want is that when this autoload is on and the user receives a new data in the table that he calls a function that makes a sound effect, I already have everything except the DataTable part, I would like to know if there is anything that fits me in this situation of receiving new data

Hi,
I'm using footerCallback to add the total amount of selected product, every thing is working fine except getting the total here is my code:

`

                            footerCallback:  function (row, data, start, end, display) {
                                        var api = this.api(), data;
                                        // Remove the formatting to get integer data for summation

                                        var intVal = function (i) {
                                            return typeof i === 'string' ?
                                                i.replace(/[\$,]/g, '') * 1 :
                                                typeof i === 'number' ?
                                                    i : 0;
                                        };

                                        // Total over all pages
                                        totalsum = api.column(3)
                                            .data()
                                            .reduce(function (a, b) {
                                                return intVal(a) + intVal(b);
                                            }, 0);

                                        $(api.column(3).footer()).html(
                                            '(' + totalsum + ' SAR) '
                                        );
                                    },

`

the odd thing is that when I change the api.column(3) to api.column(2) - which is not the wonted column- it works fine!

My tables often have a data column with a reference key/serial number that looks like a number to excel (ie: 865851038622197 or 0865851038622197). I want excel to read it as text, not a number. If excel reads it as a number, it displays it in exponential format and then loses resolution. Using excel export / excelHtml5 and exportOptions how might I do this? Or, by using buttons.customize? There are complicated ways on the excel side to do this, but its hard on my users. Thanks!

Hi!

I've got the following code.

include(dirname(__FILE__)."/../Editor-PHP-1.9.2/lib/DataTables.php");

// Alias Editor classes so they are easy to use
use DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Validate,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\ValidateOptions;

$my_id=$_POST['my_id'];
$timepoolid=$_POST['timepool_id'];

//$yourQueryArray = join(',',$timepoolid);
// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst($db, 'crapper_vulnerability', 'crapper_vulnerability.id')
//    ->order('ip')

    ->fields(

        Field::inst('crapper_vulnerability.outputtool'),
        Field::inst('crapper_vulnerability.testtypeid'),
        Field::inst( 'crapper_vulnerability.toolid' ),
        Field::inst( 'crapper_vulnerability.scanid' ),
        Field::inst( 'crapper_vulnerability.fp' )
            ->setFormatter( function ( $val, $data, $opts ) {
                return ! $val ? 0 : 1;
            } ),
        Field::inst( 'crapper_vulnerability.cvss_temp' ),
        Field::inst( 'crapper_vulnerability.cvss_env' ),
        Field::inst( 'crapper_vulnerability.cvss_base_new' ),
        Field::inst( 'crapper_vulnerability.not_in_report' )
            ->setFormatter( function ( $val, $data, $opts ) {
                return ! $val ? 0 : 1;
            } ),
        Field::inst( 'crapper_vulnerability.ip' ),
        Field::inst( 'crapper_vulnerability.mac' ),
        Field::inst( 'crapper_vulnerability.netbiosname' ),
        Field::inst( 'crapper_vulnerability.os' ),
        Field::inst( 'crapper_vulnerability.start' ),
        Field::inst( 'crapper_vulnerability.stop' ),
        Field::inst( 'crapper_vulnerability.plugin_id' ),
        Field::inst( 'crapper_vulnerability.plugin_name' ),
        Field::inst( 'crapper_vulnerability.port' ),
        Field::inst( 'crapper_vulnerability.protocol' ),
        Field::inst( 'crapper_vulnerability.cve' ),
        Field::inst( 'crapper_vulnerability.cvss_base_score' ),
        Field::inst( 'crapper_vulnerability.service_name' ),
        Field::inst( 'crapper_vulnerability.description' ),
        Field::inst( 'crapper_vulnerability.solution' ),
        Field::inst( 'crapper_vulnerability.kundenr' ),
        Field::inst( 'crapper_vulnerability.rapport' ),
        Field::inst( 'crapper_vulnerability.filename' ),
        Field::inst( 'crapper_vulnerability.tp_key' ),
        Field::inst( 'crapper_vulnerability.plugin_output' ),
        Field::inst( 'crapper_vulnerability.timepool' ),
        Field::inst( 'crapper_vulnerability.id' )

    )
    ->where('crapper_vulnerability.kundenr', $my_id)


    ->where( function ( $q ) use ( $timepoolid) {
        $q->where( 'crapper_vulnerability.timepool', '(SELECT crapper_vulnerability.timepool FROM crapper_vulnerability WHERE crapper_vulnerability.timepool LIKE :timepool)', 'IN', false);
        $q->bind( ':timepool', '%'.$_POST['timepool_id'].'%' );}
)

    ->process($_POST)
    ->debug(true)
    ->json();

I'm trying to use an array $timepool in a where condition, but I'm getting the following error:

Notice: Array to string conversion

How do I resolve this?

Kind regards,
Svendber

I'm having a strange problem with a datetime field in the editor: When I edit an existing row, the particular field in question displays the datetime field as [object Object] the first time I edit a row. After that, it always defaults to the current date in the editor field, no matter what the previously saved date is.

My Javascript code for the field in question is:

            {
                "label": "Date Due: ",
                "name": "duedate",
                "type": "datetime",
                "placeholder": "Choose Due Date",
                                "dateFormat": $.datepicker.ISO_8601,
                "opts": { firstDay: 0 }
            },

I do some computation server-side to facilitate the filtering requirements for this field. My PHP code for this field is:

        Field::inst( 'duedate' )
            ->validator( Validate::notEmpty() )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( function( $val, $data, $opts) {
                global $id;
                $filterDate = '';
                $displayDate = date("Y-m-d", strtotime( $val) );
                if ( strtotime($val) < strtotime('today') ) {
                    $filterDate = 'overdue';
                } elseif (strtotime($val) === strtotime('today')) {
                    $filterDate = 'today';
                } elseif (strtotime($val) === strtotime('tomorrow')) {
                    $filterDate = 'tomorrow';
                } else {
                    $filterDate = 'beyond';
                }
                //  Now build an object in JSON format
                $dueDateObj = (object) [
                    'filterDate' => $filterDate,
                    'displayDate' => $displayDate
                ];
                return $dueDateObj;
            } )
            ->setFormatter( function( $val, $data, $opts) {
                return date("Y-m-d", strtotime($val));      
            } ),

I've tried a couple of variations that have not helped, because I do't really see another way to do what I'm aiming at.

I am trying to make a PDf and I have implemented all the features that we required with great ease. The only question that I am struggling with at the moment is the button click event takes more than a few seconds to complete the PDF Export. Now I understand that this works under the button event handler. But how would I handle this event between the start and end of the export process.

Hi,

I'm using Datatables Select with jquery-datatables-checkboxes

I edited datatables select plugin so info default value is false
(because I don't us it much and I have a tons of tables)
var info = false;
This working fine the info does not appear on my tables
except it appear on the table where I use the Select & jquery-datatables-checkboxes plugin
which is fine but I did not enable it yet ?

"select": {
    'style': 'multi',
    'selector': 'td:nth-child(2),td:nth-child(10)',
    //'info': true,
},

So is this mean that jquery-datatables-checkboxes enable to display info by default and bypassed the Datatables settings?
Or there is the Datatables Select plugin behavior
I just want to understand how it suppose to work

Thanks

Hi. I want one tab search table, with custom filtering (Price value).

Is it possible?

If is not, with what should I replaceage=parseFloat(data[3]) to add new tab "Prices" and custom filtering to be taken from second tab? (First being name of product)

https://i.imgur.com/15cGLwA.png

I have my table nice and happy. Only certain fields are editable inline, they are editable with a drop down select list.

If I edit a field and click off the datatable (or click a non-editable filed) all is ok.
But if I click off a select editable field straight onto another editable select field, then I get this error in the console:

TypeError: g is undefined

To fix it, I thought I could change the line below:
editor.inline( this, { onChange: 'submit' } );

To this:
editor.inline( this, { onChange: 'submit' } );

But it didnt work. Any ideas or alternative thoughts?

Has anyone also had issues with DatePicker and Custom CSS. I can't get DatePicker to come up infront of all the other CSS I have. Just a general question but I can post my code if it helps.

Thanks!
-Abel

Hello,

Using DataTables and set up columns like:

columns: [
                   ...
                    { data: "Location" }
                ],

Location data in a cell could be - "Los Angeles, New York, San Francisco"

In my javascript, I use

DataTable().getSelectedRow().data().Location.search("New York")

It works if search term is the first term but does not work in above scenario where New York is the second city listed.

When I assign the value of DataTable().getSelectedRow().data().Location to a variable, I see the complete string. So the search function seems to be an issue.

What can the solution be?

Thanks,

<div class="row"> <div class="col-sm-12 col-md-6"> <div class="dataTables_length" id="example_length"><label>Show <select name="example_length" aria-controls="example" class="custom-select custom-select-sm form-control form-control-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div></div> <div class="col-sm-12 col-md-6"> <div id="example_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="example"></label></div></div></div>

I would like to change the dataTables_length to col-md-9 and the dataTables_filter col-md-3 .

How can this be done?