Greetings
I have a count field, I thought of providing calculation in it, so user can put 2+3 to get 5.
I'm using field.dependent for that.
Here is my code

let field = 'item_count';
editor.dependent(field, (val) => {
                            let obj = {values: {}};
                            try {
                                let r = eval(val);
                                if (r != val) {
                                    obj.values[field] = r;
                                }
                            } catch (e) {
                                obj.values[field] = 0;
                            }
                            return obj;
                        });

This works fine, when I put 2+5 and switch to another field, it will directly be 5.
The problem is when I put 2+5 and then click submit button. It seems that the editor send the data with the originial ("2+5") before the depenent funcion finishes.
Is there a way to make all depenedencies resolve and applied before submissionis sent ?

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

Hi. I'm using DataTables(+Responsive+FixedHeader) with Blazor. There is only one problem with FixedHeader package. It won't stick to top until a user interaction with table triggers table to rerender; like expanding/collapsing the row details(Responsive feature). Any ideas will be welcome.

I got this error please guide me. How to solve this error? Thanks in advance.

Edit button was working until I added display property in Editor. Here is the code:

editor = new $.fn.dataTable.Editor({
table: tableID,
fields: { label: fieldName ,
name: fieldID ,
type : fieldtype ,
ajax: "../upload?id=" + fieldID + "&elid=" + elid ,
display: function(id){return editor.file( "attachments", id ).filename;} }

    }
});

var table = $(tableID).DataTable({
    dom: "Bfrtip",//Buttons/f/r/t/info for entries/pagination
    data: obj,
    select: true,
    columns: { data: fieldID },
    searching: false,
    buttons: [
        {extend: "create", editor: editor},
        {extend: "edit", editor: editor},
        {extend: "remove", editor: editor}
    ]
});

Server Side json response to ajax call:

    return "{\"files\":{\"attachments\":{\"" + origfilename + "\":{\"filename\":\"" + origfilename + "\",\"web_path\":\"\\/upload\\/1.png\"}}},\"upload\":{\"id\":\"" + origfilename + "\"}}\n";

I added display property so that the name of the file is displayed when the file is uploaded in the editor window. That was successful but when I try to edit a row that was there before:

I get this error:

dataTables.editor.js:147 Uncaught Unknown file table name: attachments

when I choose a row and click 'edit'

I was wondering if there's a way in 1.10 to see the executed SQL statement built by Datatables to retrieve the data from the database. I saw this post in the forums about how to do this but there doesn't appear to be a call to file_put_contents() in Query.php nor in MysqlQuery.php anymore.

Hi there!

I'm trying to implement a column filtering menu into my Datatable, similar to the following image:

Currently I have both the Show/Hide feature and the Responsive modes turned on. However, these two seem to contradict each other when in use. It seems that when I attempt to Hide a column, the Responsive feature automatically chooses another that I didn't select to fill it's place. Or if I try and Show a column, if there are too many columns for the width of the page already in place, it simply will not do anything.

See below for a GIF of what is occuring.

Has anyone else encountered this type of issue? Are there any existing plugins or features that I'm missing which will accomplish this for me?

Thanks!

Mike

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.

I have simple DataTable and i would like to prevent user to drag last row in table (in this case Test 6) and to prevet him to add any row after that 6th row. So last row should always remain there as last. Is anything like this possible with their API ? Or what should i do?

Thanks in advance!

HTML:

HTML:

<table class="table table-hover" id="launch_cpa_table">
<thead class="bg-info">
    <th class="text-white">Step</th>
    <th class="text-white">Name</th>
    <th class="text-white">Gate</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Test 1</td>
        <td>Test 1</td>
    </tr>
     <tr>
        <td>2</td>
        <td>Test 2</td>
        <td>Test 2</td>
    </tr>
     <tr>
        <td>3</td>
        <td>Test 3</td>
        <td>Test 3</td>
    </tr> 
     <tr>
        <td>4</td>
        <td>Test 4</td>
        <td>Test 4</td>
    </tr> 
     <tr>
        <td>5</td>
        <td>Test 5</td>
        <td>Test 5</td>
    </tr> 
    <tr style = 'background : gray'>
        <td>6</td>
        <td>Test 6</td>
        <td>Test 6</td>
    </tr> 

</tbody>

JS:

 var launch_table = $('#launch_cpa_table').DataTable( {
    rowReorder: true,
    columnDefs: [
        { orderable: true, className: 'reorder', targets: [0] },
        { orderable: false, targets: '_all' }
    ],
    paging: false
} );

FiddleJs link: https://jsfiddle.net/5r6u7z02/

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.

Are you all right?
I'm having a problem and I need your help.
My application displays this error message: "DataTables warning: table id = example1 - Cannot reinitialize DataTable. For more information about this error, please see http://datatables.net/tn/3".
I have read in some places that it is important to start "Datatables" only once, but could not find a good solution. I've tried it in many ways, but in most of them I miss the translation to my language (Brazilian Portuguese). My code is following.
Can you tell me what I'm doing wrong?
Thank you all in advance!

<script>
  $(document).ready(function() {
    $('#example1').DataTable( {
        "oLanguage": {
          "sEmptyTable": "Nenhum registro encontrado",
          "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
          "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
          "sInfoFiltered": "(Filtrados de _MAX_ registros)",
          "sInfoPostFix": "",
          "sInfoThousands": ".",
          "sLengthMenu": "_MENU_ resultados por página",
          "sLoadingRecords": "Carregando...",
          "sProcessing": "Processando...",
          "sZeroRecords": "Nenhum registro encontrado",
          "sSearch": "Pesquisar",
          "oPaginate": {
              "sNext": "Próximo",
              "sPrevious": "Anterior",
              "sFirst": "Primeiro",
              "sLast": "Último"
          },
          "oAria": {
              "sSortAscending": ": Ordenar colunas de forma ascendente",
              "sSortDescending": ": Ordenar colunas de forma descendente"
          },
          "select": {
              "rows": {
                  "_": "Selecionado %d linhas",
                  "0": "Nenhuma linha selecionada",
                  "1": "Selecionado 1 linha"
              }
          }
        },  

        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        language: {
            buttons: {
                copyTitle: 'Copiado para área de transferência',
                copyKeys: 'Pressione <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> para copiar os dados da tabela para a área de transferência. <br> <br> Para cancelar, clique nesta mensagem ou pressione Esc.',
                copySuccess: {
                    _: '%d linhas copiadas',
                    1: '1 linha copiada'
                }
            }
        }
        
    } );
    // Setup - add a text input to each footer cell
    $('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
    $('#example1 thead tr:eq(1) th').each( function (i) {
        
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Procurar '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
    
    var table = $('#example1').DataTable( {

        orderCellsTop: true,

    } );
} );
</script>

I've got a screen/ Editor setup to accept Sample results for various type of moulds and germs. I can get this working fine to enter the data, but I require 2 extra columns called "Mould Total" and "Overall Total" - which will update when I tab/click out of the cell.

The Datatable is setup as follows:

     var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../server_side/scripts/ET_AQIairstipsResultsForProjectID.php?projectID=<?=$projectID?>",
        iDisplayLength: 25,
        responsive: true,
        columns: [
           { data: "tblairLocation.locationNo",  width:"10%"},
           { data: "tblairLocation.locationName",  width:"30%"},
           { data: "tblairSamples.sampleNo",  width:"10%"},
           { data: "tblairSamples.sample1", className: "editable",  width:"10%" },
           { data: "tblairSamples.sample2", className: "editable",  width:"10%" },
           { data: "tblairSamples.sample3", className: "editable",  width:"10%"},
           { data: "tblairSamples.sample4", className: "editable",  width:"10%"},
           { data: "tblairSamples.sample5", className: "editable",  width:"10%"}
        ],
        columnDefs: [
           { orderable: true, targets: '_all' }
        ],       
        order: [ 1, 'asc' ],
        keys: {
           columns: ':not(:first-child)',
           keys: [ 7 ]
        },
        select: {
           style:    'os',
           selector: 'td:first-child'
        },
        buttons: [

        ]
     } ); 

The editor is setup as follows:

     editor = new $.fn.dataTable.Editor( {
        ajax: "../server_side/scripts/ET_airstips.php?projectID=<?=$projectID?>",
        table: "#example",
        fields: [ { name: "tblairLocation.locationNo" },
                  { name: "tblairLocation.locationName" }, 
                  { name: "tblairSamples.sampleNo" }, 
                  { name: "tblairSamples.sample1" },
                  { name: "tblairSamples.sample2" },
                  { name: "tblairSamples.sample3"},
                  { name: "tblairSamples.sample4"},
                  { name: "tblairSamples.sample5"}
        ],
        formOptions: {
           inline: {
              onBlur: 'submit'
           }
        }
     } );

and the data is send over from the server using:

<?php

/*
* Example PHP implementation used for the index.html example
*/

// DataTables PHP library
include( "../../php/DataTables.php" );

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

$reqID = 0;
if (isset($_GET['projectID'])) {
$reqID = $_GET['projectID'];
// ToCleaned($reqID);
}

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'tblAQIlocationSamples' )
->field(
Field::inst( 'tblairSamples.id' ),
Field::inst( 'tblairLocation.locationNo' ),
Field::inst( 'tblairLocation.locationName' ),
Field::inst( 'tblairSamples.sampleNo' ),
Field::inst( 'tblairSamples.sample1' ),
Field::inst( 'tblairSamples.sample2' ),
Field::inst( 'tblairSamples.sample3' ),
Field::inst( 'tblairSamples.sample4' ),
Field::inst( 'tblairSamples.sample5' )
)
->where('tblairSamples.projectID',$reqID)
->where('tblairSamples.sampleType','Airstrip')
->leftjoin( 'tblairLocation', 'tblairLocation.id', '=', 'tblairSamples.AQIlocationID' )
->process( $_POST )
->json();

I want to place the 2 extra colmns after Sample 5.

The 1st column needs to add Sample 1, 2 and 3 together
The 2nd column needs to add att 5 samples together.

Thank you inadvance for any help you can offer.

Shane Brennan

This thread is for feedback of the SearchPane blog post.

SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.

Regards,
Allan

Feature list

• Full support for Bootstrap, Foundation, Semantic UI, etc.
• Server-side processing support (loading data from the server-side)
• Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
• Ordering of data to match the DataTable
• Search the search pane!
• Rebuild API method for selected columns
• Collapsible container
• Support for array based data
• Interfacing with the global search (difficult?)
• Selection options similar to Select (e.g. os and multi, etc.)
• Option to match column visibility (with or without Responsive?)

please help me how to mix searchPanes Button example https://datatables.net/extensions/searchpanes/examples/initialisation/collapseStart.html with cascadePanes option https://datatables.net/extensions/searchpanes/examples/initialisation/viewTotalCascade.html ??
sorry im new user.

I've set up the processing dialog in my table definition and the message comes up fine when I sort a column. Unfortunately, the processing event doesn't fire when I use the search box or programatically filter the columns. The reference manual says "This event is fired when DataTables is doing some kind of processing - be it, sorting, filtering or any other kind of data processing".
Am I wrong to assume that it should fire for search or filtering? I know that the column filtering is really column searching so I figured the search box should also fire the processing event. I was also wondering if paging should fire the processing event?
Thanks.

Checking out the New extension and found a small issue when looking at the Search Panes Button example. In the console I see this error when clicking the button:

Uncaught TypeError: d._panes.adjust is not a function

Doesn't affect the operation.

Also noticed there is no option for Search Panes in the Category drop down for this New Discussion.

Kevin

I am using YADCF plugin with Datatables and I found a little glitch. I am trying to update a selector, but table_arg.fnDraw inside exFilterColumn function is reseting select filter value.

yadcf.initOnDtXhrComplete(function() { 
      yadcf.exFilterColumn(oTable, [[4, $("#yadcf-filter--mytable-4 option:eq(1)").val()]], true); 
   });

Daniel, developer of YADCF who has discovered the bug on Stackoverflow.

You can check on website https://bow.thingiverse.ml

Hi all,

I have two tables on the same page with different data except for a single column that may have the same data in both of them (think products and categories and both share the cat ID column).

Example here: http://live.datatables.net/sabiluju/1/edit

The goal is when selecting a row from the top table to add the class hidden to the rows on the second table that have the same cat ID and when deselecting to remove it.

Datatable responsive does not load responsively on first load but if window resize the responsive api will effect.

What i have done so far:

    $('#example').DataTable( {
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.modal( {
                                header: function ( row ) {
                                    var data = row.data();
                                    return 'Details for '+data[0]+' '+data[1];
                                }
                            } ),
                            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                                tableClass: 'table'
                            } )
                        }
                    }
                } );

table:
<table id="example" class="table table-striped table-bordered" style="width: 100%;">

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

Hi ,
I am new to dataTable concept i am trying to search particuler date column between two dates ,here I am taking reference from this page https://datatables.net/examples/plug-ins/range_filtering.html but i am getting this error 'Uncaught TypeError: Cannot read property 'ext' of undefined ' .
I was searching this page 'https://datatables.net/forums/discussion/31476/uncaught-typeerror-cannot-read-property-ext-of-undefined' but i am not getting solution .

Here is my javascript code:

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        alert("test");
        table.draw();
    } );
} )
 ```

My HTML code:

        <div class="table-responsive">
            <div>
                <table id="example" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>col 1</th>
                            <th>col 2</th>
                            <th>col 3</th>
                            <th>AGE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>data 11</td>
                            <td>data 12</td>
                            <td>data 13</td>
                            <td>24</td>
                        </tr>
                        <tr>
                            <td>data 21</td>
                            <td>data 22</td>
                            <td>data 23</td>
                            <td>52</td>
                        </tr>
                        <tr>
                            <td>data 31</td>
                            <td>data 32</td>
                            <td>data 33</td>
                            <td>33</td>
                        </tr>
                    </tbody>
                </table>

```

Thanks

I need help with working example of a datepicker in datatable on click on td cell .And after leaving the cell, the input value either selected with datepicker/input text by user should set in the td cell. And the datepicker should go away unless the user clicks the cell again

I am unable to achieve this .

Please help. Thanks in advance