hello.

I tried responsive Complex headers.
See this example.

https://datatables.net/extensions/responsive/examples/display-control/complexHeader.html

It is my table. But my table has a different header.

I don't want to see 'Thi ...' like the example. What should I do?

Thanks.

Hey there,

I need a help with responsive plugin.
I have really big table with lots of columns but responsive plugin hides all the columns under green "+" sign that are overflowing the screen size. I want to force them to stay on the screen with scroll bar and hide under green "+" sign only the last column.

According to the screenshot - I want to force showing:
- Customer
- Description
- Created at
- Created by
columns and only Actions column hide under the row.

Does anyone have a solution to get Individual column searching (select inputs) working with server side processing? I have a mysql database with 5.4 million records... https://teknowlage.com/voter/voter_report.php
For obvious reasons,, I only need City, Party, 2016G, 2018P, and 2018P columns to use dropdowns.

Thanks, Ed

Hey guys,

I'm having some trouble with DataTables.

I'm trying to use the server-side script to make data loading faster in a project, but I keep getting errors.

When I load the page, the first error I get is:

datatables.min.js:86 Uncaught Error: DataTables warning: table id=lista_pedidos - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
at K (datatables.min.js:86)
at Object.error (datatables.min.js:48)
at i (jquery.js:2)
at Object.fireWith [as rejectWith] (jquery.js:2)
at A (jquery.js:4)
at XMLHttpRequest.<anonymous> (jquery.js:4)

When I type anything on the search field I get the same error in the logs and in the tab "Network" I get the following error:

<br />
<b>Notice</b>: Undefined offset: 0 in <b>C:\wamp64\www\prevmais\sistema\app\server\ssp.class.php</b> on line <b>116</b><br />
<br />
<b>Notice</b>: Undefined offset: 0 in <b>C:\wamp64\www\prevmais\sistema\app\server\ssp.class.php</b> on line <b>162</b><br />
<br />
<b>Notice</b>: Undefined offset: 1 in <b>C:\wamp64\www\prevmais\sistema\app\server\ssp.class.php</b> on line <b>162</b><br />
<br />
<b>Notice</b>: Undefined offset: 0 in <b>C:\wamp64\www\prevmais\sistema\app\server\ssp.class.php</b> on line <b>176</b><br />
<br />
<b>Notice</b>: Undefined offset: 1 in <b>C:\wamp64\www\prevmais\sistema\app\server\ssp.class.php</b> on line <b>176</b><br />
{"error":"An SQL error occurred: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'LIMIT 0, 100' at line 5"}

These are my scripts:

1) Initializing DataTables:

$(document).ready(function() {

$.fn.dataTable.ext.errMode = 'throw';

$('#lista_pedidos').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        url: "/app/server/server_side.php",
        dataType: 'JSON'
    }

});

2) Server-side script:

<?php

header('Content-Type: application/json');

/*
* 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 = 'pedidos';

// Table's primary key
$primaryKey = 'id';

// 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' => 'id', 'dt' => 0 ),
array(
'db' => 'pedidos_data',
'dt' => 1,
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array( 'db' => 'pedidos_nome', 'dt' => 2 ),
array( 'db' => 'pedidos_cpf', 'dt' => 3 ),
array( 'db' => 'pedidos_rg', 'dt' => 4 ),
array( 'db' => 'pedidos_nascimento', 'dt' => 5 ),
array( 'db' => 'pedidos_status', 'dt' => 6 ),

);

// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => '',
'db' => 'prevmaisaude',
'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 )
);*/

require( 'ssp.class.php' );

$d = SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns );

var_dump( $d );

echo json_encode( $d );

What am I doing wrong?

Hi,

I wanted to achieve a toggle button on my form for lookup / manual entry of address data.

I successfully implemented the plugin featured here https://editor.datatables.net/examples/plug-ins/fieldPlugin.html

The toggle button works well.

However 'dependent' does not fire when I reference the plugin field.

    editor.dependent( 'bLookupVsManual', function ( val ) {

        console.log(val) 
        return {}

    }, {

        event: 'change'

    } )

I have tried to do a manual change trigger within the plugin click event as follows:

     editor.field( 'bLookupVsManual' ).input().trigger('change')

Is there a reason dependent does not work with the plugin?

My workaround is to place the editor.field().show() / editor.field().hide() into the click listener within the plugin code though I think naming specific fields is getting too specific for a plugin so I wondered if dependent could be made to work.

Thanks for any help.

when i scroll vertically the header of the table will be fixed under the nav bar.. but the scroll bar will comes. and i scroll horizontally . the tables header only moves. the tbody will not moved.

I'm using the colvis button as well as the excel button in a Datatable. The problem I'm facing is when I hide columns with the colvis button and then want to export the column cell data in the excel export customization option the columns in the excel sheet changes.

Beefore I export I need to modify some of the cells in a certain column. It is when I try to access the column where the problem lies:

let idColumn = $('c[r^="B"]', this);

Since I have hidden fields, the excel sheet columns letter changes and the id column is not found.

So I still need to access this field in the excel sheet to save the data but I don't want to export the column, it should still be hidden when downloading the file when pressing the button. Is there a way to do this?

I would very much appreciate any help I can get!

INTRO
I ran into strange problem: my datatable is showing "Showing 11 to 10 of 10 entries " which is obviously nonsense. I think this could be kind of bug.

I am using PHP server side processing, stateSave: true, resetDisplay: false, processing: true, serverSide: true and some others which I believe are not important.

Let's assume I am showing just some active data, 11 records in total, page length 10 rows => 2 pages withou filter.
When I go to some editation form directly from datatable **second ** page and deactive one record and go back, I am getting message you can see above. AJAX parameters are start:10 and length:10.

Obviously, datatable tries to load / thinks I am still on second page which "doesn't exist" anymore.

The question is how can I handle this. I can handle it on server side like:

if (filteredCount === offset) {
offset = 0;
}

but I am still getting bad message. Thx for your thoughts!

Hi!
Is it possible to restrict editing to being done in the (bubble) from, avoiding editing in table view?
Peter

I'm using the standalone editor on a Thymeleaf template and I'm having problems with the inline form not closing after saving. It only occurs when I use a different display value than the value being edited, requiring the data-editor-value property.

I have 2 select fields, status and owner. The status value/display are the same, and works great. The owner has a value of the username, and a display of the user's full name. I'm using the following to update the options after initialization.

dataEditor.field("owner").update(options);

Here are the two field definitions

<dl th:attr="data-editor-id=${task.id}">

<dt data-editor-label="status.name" >Status</dt>
<dd data-editor-field="status.name" th:text="*{task.status.name}" class="p-2 border"></dd>

<dt data-editor-label="owner" >Owner</dt>
<dd data-editor-field="owner" th:attr="data-editor-value=*{task.owner}" th:text="*{task.ownerName}" class="p-2 border"></dd>

</dl>

The field and editor inits

var fields = [
{ label: "Status", name: "status.name", type: "select", options: [ { label: 'Active', value: 'Active' }, { label: 'Canceled', value: 'Canceled' }, { label: 'On Hold', value: 'On Hold' } ] },
{ label: "Owner", name: "owner", type: "select" }
];

var dataEditor = new $.fn.dataTable.Editor( {
        ajax: 'api/tasks/update',
        fields: fields
    } )
    .on( 'preSubmit', function ( e, d, type ) {
        var fieldObj = d.data[Object.keys(d.data)[0]];
        d.id = (Object.keys(d.data)[0]);;
        d.field = Object.keys(fieldObj)[0];
        field = d.field;
        d.value = field == 'status' ? fieldObj[Object.keys(fieldObj)[0]].name : fieldObj[Object.keys(fieldObj)[0]];
        d.projectId = projectId;
    } )
    .on( 'postEdit', function ( e, json, data ) {
        flashSuccess ( $('dd[data-editor-field="' + (field == "status" ? "status.name" : field) + '"]') );
    });

Data field click event

    $('[data-editor-field]').on( 'click', function (e) {
        console.log('click');
        var isOpen = dataEditor.display();
        console.log(isOpen);
//      if (isOpen) { console.log('isOpen'); return false };
        var f = this;
        var fieldToEdit = $(this).attr('data-editor-field');
        var id = $(this).closest('dl').attr('data-editor-id');
        if (!isOpen) {
        if (fieldToEdit == 'instructions') {
            dataEditor
            .title("Instructions")
            .clear()
            .add( {
                name:  'instructions',
                type: 'textarea'
            } )
            .buttons( [  
                { 
                    text: "Update Revision", 
                    className: "btn-primary",
                    action: function () { updateRevision = true; this.submit(); }
                },
                { 
                    text: "Update", 
                    className: "btn-primary",
                    action: function () { this.submit(); }
                }
            ])
            .on( 'open', function ( e, d, dtType ) {
                $('div.modal.DTED .col-form-label').css('display', 'none');
                $('div.modal.DTED textarea').css('min-width', '450px');
                $('div.modal.DTED textarea').css('min-height', '450px');
            } )
            .edit();
        } 
//      else if (fieldToEdit == 'owner') {
//          console.log('owner');
//          var options = [];
//          var obj = {};
//          $.ajax({
//                  url: "api/projects/" + $("#project-id").attr("data-project-id") + "/users",
//              type: "GET",
//              cache: false,
//              dataType: 'json',
//              success: function(json) {
//                  for (var userProject in json.data) {
//                      obj = {};
//                      obj.label = json.data[userProject].user.lastNameFirstName;
//                      obj.value = json.data[userProject].user.userName;
//                      options.push(obj);
//                  }
//                  
//                  dataEditor.field("owner").update(options);
//                  
//                  dataEditor
//                  .inline( f , {
//                      buttons: { label: 'Update', className: 'btn-primary', fn: function () { 
//                          this.submit();
//                      } }
//                  } );
//              },
//              error: function() {
//                  return "A problem occurred while retrieving project users.  Please try again in a few minutes.";
//              }
//          });
//          
//      }   
        else {
            dataEditor.inline( f , {
                buttons: { label: 'Update', className: 'btn-primary', fn: function () { 
                    this.submit();
                } }
            } );
        }
        }
    } );

I'm really stuck. The right json is being returned after saving, the editor just stays open, but it doesn't for that status field.

Any ideas?

I always get the following error. I press okay and still everything seems to work so far.

DataTables wanring (table id = 'datatable'): Cannot reinitialise DataTable

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy
I always get the following error. I press okay and still everything seems to work so far. I have seen that Drupal 7 has a patch for this error. There is also a patch for Drupal 8.

In the documentation of the datatables plugin I found the following:

https://datatables.net/manual/tech-notes/3

But where to put it. Thanks for your help.

**my datatables.js
**
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
var asInitVals = new Array();

jQuery(document).ready(function() {
  var oTable = jQuery('#datatable').dataTable({
    paging: false,
    searching: false,
    "oLanguage": {
      "sSearch": "Search all columns:"
    }
  });

  jQuery("thead input").keyup(function() {
    /* Filter on the column (the index) of this element */
    oTable.fnFilter(this.value, jQuery("thead input").index(this));
  });



  /*
   * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
   * the footer
   */
  jQuery("thead input").each(function(i) {
    asInitVals[i] = this.value;
  });

  jQuery("thead input").focus(function() {
    if (this.className == "search_init")
    {
      this.className = "";
      this.value = "";
    }
  });

  jQuery("thead input").blur(function(i) {
    if (this.value == "")
    {
      this.className = "search_init";
      this.value = asInitVals[jQuery("thead input").index(this)];
    }
  });
});

To add scrollers to my Datatable I'm currently using:

scrollY: '50vh',
scrollX: true,

I'm using vh in order for the table header to always be visible when scrolling vertically. The problem is that the height of the table will change a lot according to how much data is in the table. I need a way for the table height to always be as long as the size of the browser window. Is there a way of doing this?

I'm making date time difference between a date time from database and current time but it return string like:
PT6H8M38S
-PT42M57S

my code:

ar tdy= new Date();
var dt= tdy.getFullYear()+'-'+(tdy.getMonth()+1)+'-'+tdy.getDate();
var time= tdy.getHours() + ":" + tdy.getMinutes() + ":" + tdy.getSeconds();
var dateTimeJs= dt+' '+time;

var dateDTD= 2020-01-02 08:38:52

moment.duration(moment(dateTimeJs).diff(moment(dateDTD)))

I know this is not for moment js but i want to know is there a feature in datatable ?

The above images show a table row then a child row which get results from ajax. I'm printing whole table instead of json because i want to assign function to each of the numbers then show specific results (more details).

Param1 will be manager id and Param2 will be status like which counter details to show, like in the image Active has count of 203, so when i click on 203 it pass parameters to function then send another ajax call to show more details in modal.

So how to make work with json with function/parameters ?

Hi,

I'm using https://github.com/gyrocode/jquery-datatables-checkboxes/

And trying to save the statesave

In console.log on page load, there is no checkbox selected
using stateSaveCallback or stateSaveParams

the result for the checkbox state is

checkboxes: (2) [empty, {…}]
checkboxes: Array(2)
1: {}
length: 2
__proto__: Array(0)

I guess the problem come from this [empty, {…}] instead of displayed this [{…}]
I'm sending the table state like this "tablestate": JSON.stringify(data)
because I'm saving the state into DB and only the checkbox statevalues are not saved the other Datatables are saved ok

I'm using Datatables 1.10.11 (cannot update to latest for now)
Any idea what is going wrong and recommendation to fix this.

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

I try to add attr for the textarea in order to change the height, however the textarea is still unchaged, Please tell me where I did wrong, thank.

{
label:  "Remark:",
name:   "m.remark",
type:   "textarea",
attr: {
  class: "form-control",
  rows: "10",
  cols: "40",
  length : "280",
  height: "400"
  }
},

In order to get the textarea height shorter as what I need, I can only apply css at the at top of the javascript as below. It works but I not sure if it is the good method or I should apply a wrong attr at editor

<style>
    div.DTE_Field_Type_textarea textarea {
        height: 40px !important;
    }
</style>

I was playing with datatable and keep the editor (always visible editing panel setup). When I switch rows in the datatable, only "preClose" is invoked and I cannot invoke "preEdit". I have two questions - how do you invoke "preEdit" and what are the parameters passed to these event handlers? The examples shows e or type and I'm guessing "e" is editor and not sure what "type" is.

 editor
      .on( 'open',  function ( e, type ) {
          openVals = JSON.stringify( editor.get() );        
      } )
      .on( 'preSubmit', function ( e ) {
          alert("preSubmit :"+JSON.stringify( editor.get()) +" ====== "+ openVals);  
          if ( openVals !== JSON.stringify( editor.get() ) ) {
              return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
          }
      } )
       .on( 'preEdit', function ( e ) {
          alert("preEdit :"+editor.get() +" ====== "+ openVals);  
          if ( openVals !== JSON.stringify( editor.get() ) ) {
              return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
          }
      } )
       .on( 'preCreate', function ( e ) {
          alert("preCreate :"+editor.get() +" ====== "+ openVals);  
          if ( openVals !== JSON.stringify( editor.get() ) ) {
              return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
          }
      } )
       .on( 'preClose', function ( e ) {
          alert("preClose :"+"\n"+ JSON.stringify( editor.get()) +"\n"+ openVals);  
          if ( openVals != JSON.stringify( editor.get() ) ) {
              return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
          }
      } ); 

Hey,

I'm using the new finished SearchPanes (it's awesome BTW) and utilizing the buttons feature and wanted to be able to show the end user if filters are set or not as a flag on the button itself. I didn't see any built in API to return the number of filters set. It would be helpful in connection with the stateSave so if they come back to the page after awhile, they'll know quickly if they have any filters.

I'm using a bit of a hacky way to do it, by pulling it down from the ".dtsp-title" div that displays it on the SearchPane itself but wanted to know if there was a cleaner way to do this, or if maybe an extra API function could be added?

Here's what I'm using now, the timeout is used since it seemed to be needed as the draw happened a bit too quickly and it would update the wrong value. I tried to utilize this thread, but it seems to be from an earlier version of SearchPane that doesn't work so much anymore:

https://datatables.net/forums/discussion/comment/152361/#Comment_152361

Here's my current solution (it's not great):

        table.on('draw', function () {
            setTimeout(function () {
                var filtersApplied = $('.dtsp-title').text();
                filtersApplied = filtersApplied.replace('Filters Active - ', '');
                $("#filterCount").text(filtersApplied);
            }, 500);
        });

The initComplete sets up the filterBtn with the badge:

            initComplete: function () {
                $(".createBtn").removeClass("btn-secondary").addClass("btn-success");
                $(".refreshBtn").removeClass("btn-secondary").addClass("btn-primary");
                $(".resetBtn").removeClass("btn-secondary").addClass("btn-danger");
                $(".filterBtn").removeClass("btn-secondary").addClass("btn-info");
                $(".filterBtn").append(' <span class="badge badge-light" id="filterCount">0</span>');
            }

Thanks for any help