Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML


Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog

Channel Description:

Recent Discussions — DataTables forums

older | 1 | .... | 2260 | 2261 | (Page 2262) | 2263 | 2264 | .... | 2326 | newer

    0 0

    I have a lot of data that needs to be put in the datatable. The code was written long back that rewriting the code will be a huge task for me to add server side pagination.
    So I had applied a filter 'Sub Brand' so that I can reduce the count of data coming in the UI.

    The count of data reduced significantly by the ratio, but still there were 2088 data that needs to be populated in the datatable.
    However, 2088 was still taking a time of almost 8-10 seconds.

    I tried improving the SQL query so that I can just fetch whatever data I need for the particular page. Even though the query executed faster than before, the time taken for the UI to load is still the same, without any significant change.

    Could you suggest me a solution for this, excluding server side pagination for now?
    If there are no other solutions, that's the one I will probably have to go ahead with, but considering the time and testing it requires, I'm not really sure if my colleagues would suggest that way.


    0 0
  • 11/21/18--02:36: multiple data in single cell
  • i need to insert multiple data one below other in single cell of column how to achieve it?

    0 0
  • 11/21/18--02:48: use different data source?
  • I have my own visualization of a table that isn't using datatables for the display. I have created a standalone editor instance, and I want to load the data from my visualization into the edit form when the form is opened.

    The "row" is clicked on in my visualization, and from the click handler I have access to an object which looks just like an object which would normally be returned in an editor submit response.

    I'm not quite sure the easiest way to initialize the form with this object's data. I was thinking to use multiSet() but it looks like that is expecting row ids in the inner-most nesting.

    Looking at Editor.prototype.edit, it looks like it is calling _dataSource() to initialize the form, but I can't see how to get in the middle of that.

    0 0

    Hi all!

    First of all thank you all for this great plugin. it's awesome. this is my first time falling in love with a plug-in.

    Anyway, we have a weird situation here. It's obvious information that when stateSave set to true, plug-in saves variables of table. now i am displaying 100 record per page and lets assume user current on page 4 (400-500 records). when page is reloaded or any other filer applied on the same page. iDİsplayStart not changing. So if there's less data then previous page, server returns empty result. so table fails.

    So far, i've tried to use fnDisplayStart plug-in and tried to set first page on initcomplete event , but not yet achieved my goal.

    Thank you all for your kind answers.

    0 0

    When I create a new entry I want to also save two fields in another database table as a reference. In my specific case they are two ID's. day_id and item_id.

    How can I get the ID field of the entry last created by the Editor instance/process? So I can then add it to my reference table?


    0 0

    I'm sure this is very simple but I cannot find it...

    "footerCallback": function( tfoot, data, start, end, display ) {
        var api = this.api();
        var theColumnTotal = api
            .column( 4 )
            .reduce( function (a, b) {
                    return '';
                } else {
                    a = parseFloat(a);
                    return '';
                } else {
                    b = parseFloat(b);
                return (a + b).toFixed(2);
            }, 0 );
        // Update footer
        $( api.column( 4 ).footer() ).html(
            theColumnTotal / [NEED ROW COUNT HERE]

    Let me know if there is any further info needed, thanks!

    0 0
  • 11/14/18--03:22: Server-side checkbox filter
  • Hello, this is my table with 2 checkboxes:

    I'm trying to filter data in my table with these two checkboxes (will be more checkboxes and date-picker in the future). I'm using the php server_processing php and ssp.class.php. I found some comments about custom filtering in the ssp.class.php file, but there is no example how to do it and there is no example also in the DataTables forum or internet.

    I know that I need to modify the WHERE conditoin in the ssp.class.php when checkbox is selected, but I'm completely lost how to do it. Thank you in advance.

    0 0

    With JavaScript I would like to retrieve the data from a column where the data of another column meets a specified criteria. In the example below I am trying to retrieve the data of column A where column B us 'True'. Now I am still retrieving all the data of column A, like the search on column B is not being applied. Your help is much appreciated.

    0 0

    Hi i have the buttons export for csv then i having like below sampl

    Buttons: [ {extend: csv, exportoptions:{orthogonal: myexport, columns: [0,3,4,5,6,7]

    I already get the header from buttons.html5.js using the data.header i got the header name.

    Question is how can i get the columns fields. can i use data.fields? Using the exportoptions columns?

    Thank u so much :smiley:

    0 0

    I am using server-side processing taken from this example:

    I want to be able to search on several words. The problem is that I have to start the search with capitol letter. I have several columns with e.g. "Terje Olsen" and "2011-666". Now I can search for "-666 terje" but returns nothing if I don't use "-666 terje" (with T). I have turned of "serverSide": true, so then I can search multiple words. But still I have to use correct letters for text. "Terje" and not "terje". Why is this

    var table = $('#example').DataTable( {
    language: {url: '//'},
    "processing": true,
    // "serverSide": true,
    "ajax": "/code/server_processing.php",
    "columns": [
    "className": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": '',
    "render": function () {
    return '<i class="fas fa-plus-circle" aria-hidden="true"></i>';
    { "data": 1 },
    { "data": 5 },
    { "data": 9 }
    "order": [[1, 'asc']],
    "rowCallback": function( row, data, index ) {
    if ( typeof data[13] !== "undefined" ) {
    } );

    0 0


    I exported the file with 2 checkbox how can i hide the other one. See pics below.

    Thank u so much :smiley:

    0 0

    Here is my upload debug :


    After a reorder event, I want to loop over all rows to get their ID in the first column.
    Actually the issue is when I loop over datatable rows, I get them in their intial order, before the Reorder.

    The idea is to get all rows with myTable.rows().every() but in this way it still returns rows in the order before RowReorder event...

    That's my current code :

              myTable.on('row-reorder', function (e, diff, edit) {
                    var categories = [];
                    myTable.rows().every(function (rowIdx, tableLoop, rowLoop) {
                       // here 
                    if (categories.length > 0) {
                            'url': 'myUrl',
                            'method': 'post',
                            'data': {
                                ids: categories
                        }).done(function (data) {

    Thanks a lot.


    0 0

    I cannot for the life of me figure out how to remove the "print" button from my table. Any ideas? Thanks

    0 0

    Hi have a custom display controller that renders the editor after the last row in the datatable:

    (function(window, document, $, DataTable) {
    var self;
    Editor.display.inline = $.extend( true, {}, Editor.models.displayController, {
         * API methods
            "init": function ( editor ) {
                return self;
            "open": function ( editor, append, callback ) {
                var table = $(editor.s.table).DataTable();
                var row = table.row(':last');
                //var row = editor.s.modifier;
                if (self._shown == true) {
                    // Close any rows which are already open
                    Editor.display.inline.close( editor );
                    self._shown = false;
                // Open the child row on the DataTable
                    .row( row )
                    .child( append )
                $( table.row( row ).node() ).addClass( 'shown' );
                if ( callback ) {
                self._shown = true;
            "close": function ( editor, callback ) {
                var table = $(editor.s.table).DataTable();
                table.rows().eq(0).each( function ( idx ) {
                    if ( table.row( idx ).child.isShown() ) {
                        table.row( idx ).child.hide();
                        $( table.row( idx ).node() ).removeClass( 'shown' );
                } );
                if ( callback ) {
            "_shown": false
    } );
    self = Editor.display.inline;
    }(window, document, jQuery, jQuery.fn.dataTable));

    How can I:

    a) Remove the bootstrap header from the editor? <div class="DTE DTE_Action_Create">
    b) Add a close button next to the create button?

    0 0
  • 11/15/18--07:05: Create test case for editor
  • Hi
    Is it possible to build a test case for editor with the ajax /ssp/staff.php
    If so what link should we use into


    0 0

    Data Table

    $(document).ready(function() {
          var advance = $('#advanced-table').DataTable( {
          dom: 'B<"clear">lfrtip',
        "processing": true,
        "serverSide": true,
                            url :"server_processing.php ", // json datasource
                            type: "post",  // method  , by default get
              mark: true,
               columnDefs: [
                    targets: 1,
                    className: 'noVis',
                    "targets": [ 6 ],
                    "visible": false
                    "targets": [ 7 ],
                    "visible": false
        buttons: {
            name: 'primary',
            buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'  ]
              //"language": {
                    //"url": ""
               // } 
        } );
        $('a.toggle-vis').on( 'click', function (e) {
            // Get the column API object
            var column = advance.column( $(this).attr('data-column') );
            // Toggle the visibility
            column.visible( ! column.visible() );
        } );  
    // Setup - add a text input to each footer cell
        $('#advanced-table tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
        } );
          // Apply the search
        advance.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( !== this.value ) {
                        .search( this.value )
            } );
        } );
        } );


    /* Database connection start */
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "entt";
    $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 =>'ID', 
        1 =>'Nome', 
        2 => 'E-mail',
        4 => 'Cidade',
        5 => 'Estado',
        6 => 'Cep',
        7 => 'Data',
        8 => 'Hora',
        9 => 'Status'
    // getting total number records without any search
    $sql = "SELECT id, email, nome, cidade, estado, cep, data, hora ";
    $sql.=" FROM usuarios";
    $query=mysqli_query($conn, $sql) or die("server_processing.php: get usuarios");
    $totalData = mysqli_num_rows($query);
    $totalFiltered = $totalData;  // when there is no search parameter then total number rows = total number filtered rows.
    $sql = "SELECT id, email, nome, cidade, estado, cep, data, hora ";
    $sql.=" FROM usuarios WHERE 1=1";
    if( !empty($requestData['search']['value']) ) {   // if there is a search parameter, $requestData['search']['value'] contains search parameter
        $sql.=" AND ( id LIKE '".$requestData['search']['value']."%' "; 
        $sql.=" OR nome LIKE '".$requestData['search']['value']."%' ";
        $sql.=" OR email LIKE '".$requestData['search']['value']."%' ";
        $sql.=" OR cidade LIKE '".$requestData['search']['value']."%' )";
        $sql.=" OR estado LIKE '".$requestData['search']['value']."%' )";
        $sql.=" OR cep LIKE '".$requestData['search']['value']."%' )";
        $sql.=" OR data LIKE '".$requestData['search']['value']."%' )";
        $sql.=" OR hora LIKE '".$requestData['search']['value']."%' )";
    $query=mysqli_query($conn, $sql) or die("server_processing.php: get usuarios");
    $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("server_processing.php: get usuarios");
    $data = array();
    while( $row=mysqli_fetch_array($query) ) {  // preparing an array
        $nestedData[] = $row["id"];
        $nestedData[] = $row["nome"];
        $nestedData[] = $row["email"];
        $nestedData[] = $row["cidade"];
        $nestedData[] = $row["estado"];
        $nestedData[] = $row["cep"];
        $nestedData[] = $row["data"];
        $nestedData[] = $row["hora"];
        $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

    DataTables warning: table id=advanced-table - Requested unknown parameter '8' for row 0, column 8. For more information about this error, please see

    0 0

    I'm trying to set up some date columns with a custom date format. I started with format 'ddd DD MMM YYYY' but realised this would be too long so I've now changed to 'ddd DD/MM/YYYY' to save a bit of horizontal space. All the dates and sorting were working fine when I was using 'ddd DD MMM YYYY'.

    Since changing the format, I'm getting a weird 'Invalid Date' issue.


    <table id="ops-br-table" class="table-full-width table table-striped table-minimal-padding">
                <th>Request Date</th>
                <th>Tour ID</th>
                <th>Tour Name</th>
                <th>Email Address</th>
                <th>Brochure Sent</th>
                <th>Planned First Chase</th>
                <th>First Chase</th>
                <th>Planned Second Chase</th>
                <th>Second Chase</th>


    $.fn.dataTable.moment('ddd DD/MM/YY');
        ajax: {
            url: settings.apiBaseUrl + 'interactions/brochurerequests',
            dataSrc: ''
        columns: [
                data: 'requestDate',
                type: 'date',
                render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
            { data: '' },
            { data: 'tourId', width: "5%"  },
            { data: 'tourDetail.tourName', width: "10%" },
            { data: 'tourDetail.tourDuration' },
            { data: 'userComment', width: "15%" },
            { data: 'user.friendlyIdentifier' },
            { data: '' },
                data: 'sentDate',
                type: 'date',
                render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
                data: 'plannedFirstChaseDate',
                type: 'date',
                render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
                data: 'firstChaseDate',
                type: 'date',
                render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
                data: 'plannedSecondChaseDate',
                type: 'date',
                render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
                data: 'secondChaseDate',
                type: 'date',
                render: function (data, type, row) { return data ? moment(data).format('ddd DD/MM/YY') : ''; }
        order: [
            [ 0, "desc"]
        pageLength: 25

    Here's a Fiddle without the AJAX dependency:

    Interestingly, in the fiddle, the only date that works is "Mon 11/06/18" but if I change this to "Mon 20/06/18" then it breaks too. It's like it's getting the day and month values confused or something. Is it something to do with the forward slashes? If so, I've already tried escaping them with square brackets as described here: which did not work.

    EDIT: Updated fiddle and removed escaping square brackets from formats.

    0 0
  • 11/21/18--08:27: insert data in 2 tables
  • Hello everybody.
    I have 2 tables T1 and a t2 linked by a foreign key T1_fk_t2.
    I create an editor form on my T1 master table with some fields of my t2 table.
    I want to be able to create a new record in the my 2 tables from my T1 editor form.
    I thought to use an event like .on('preCreate' in my js file or ->on( 'preCreate ' in my php file to creta the row in my t2 table before create row in T1 table.
    But every time i have this alert "Foreign key violation: 7 ERREUR: une instruction insert ou update sur la table « T1 »" because the record in my t2 table is not created before.
    How can i do this. I really want to use the T1 editor form and only one submit button.
    Thanks for your help.

    0 0

    How can i use a join with Editor PHP librairies in my php file.
    I would like to use a syntaxe like this with on join between two tables.

    include_once( $_SERVER['DOCUMENT_ROOT']."/php/DataTables.php" );

    $countries = $db
    ->select( 'country', ['id as value', 'name as label'], ['continent' => $_REQUEST['values']['continent']] )

    Thanks for your help.

    0 0

    I have datatable where it holds many columns with decimal values. my application is being used by German users.

    Here is a small example where I have an issue.

    A B
    70.000,00 700,00

    When I export this datatable using excel export, I am getting the below result.

    A B
    -- ----
    70.000,00 70000

    Here I am getting incorrect value in B column . It is not treating , as decimal where as it must be in German Format. Instead it is treating it in English format and showing it as 70000 instead of 700. Somehow unfortunately column A is showing with an error and hence it is not changing the format. Please help me here how can i fix this issue.

older | 1 | .... | 2260 | 2261 | (Page 2262) | 2263 | 2264 | .... | 2326 | newer