hi all,

i use Editor Datatable when i select rows from datatable et use button editor all works fine all details from each selected rows are send.

Now i have created a extra button but when i follow the sames steps all workfine but all rows from datatable are send but not only selected rows.

Below the code

Standard button

           editorcreateticket = new $.fn.dataTable.Editor( {
                ajax : {
                    url: '/sgp/editor/fiche',
                    data: function(d) {
                        d.action =  "ticket";
                    console.log("d: ",d);
                        },
                },
                table : '#tableSgp',
                idSrc : 'id',
                "events": '',
                fields: [ {
                    label : 'Nom du ticket',
                    name : 'libelle',
                     optionsPair: {
                        value: 'id',
                    }
                },
                {
                        label: "Typologie",
                        name:  "Typologie",
                        type:  "select",
                        options: [
                            { label: "",    value: "VIDE" },
                            { label: "Crée",    value: "Crée" },
                            { label: "Attribué",    value: "Attribué" },
                            { label: "En cours de traitement",   value: "En cours de traitement" },
                            { label: "Résolu",   value: "Résolu" },
                            { label: "Envoi en litige",   value: "Envoi en litige" },
                            { label: "Ecarts acceptés",   value: "Ecarts acceptés" }
                        ]
                },
                {
                    label : 'Commentaire',
                    name : 'commentaire',
                    // type : 'text',
                },
                {
                        label : 'Utilisateur',
                        name : 'users',
                        type : 'select',
                        multiEditable : true,
                        placeholder : 'Choisir un utilisateur'
                }

            } );

Extra Button

           $('#ticketButton').on('click', function (e) {
                e.preventDefault();
                var resultat = selected();
               console.log("resultat");
                editorcreateticket
                    .title('<br><H2><span style="color: black; font-family: Reckless Neue;">Créer un ticket</span></H2><br>'+ resultat[0]["count"]+ ' Fiches séléctionnées ... <p><span style="color: black;">Créez un ticket à partir des écarts sélectionnés. Vous pouvez vous l’attribuer ou l’attribuer à un responsable. <div class="container"><p>Exactitude</p><div class="progressbar-wrapper"> <div title="downloaded" class="progressbar mp4">64%</div></div></span></p>')
                    .ajax({
                    url: '/sgp/editor/fiche',
                        data: function(d) {
                        d.action =  "ticket";
                        console.log(d);
                    },
                })
                    //.table('#tableSgp')
                    //.idSrc('id')
                    .buttons([
                        {
                            label: 'Annuler',
                            className: 'closeButton',
                            action: function () {
                                var that = this;
                                setTimeout(function() {
                                    that.close();
                                }, 100);
                            }
                        },
                        {
                           label: 'Créer',
                        }])
                    .edit();
            } );

Could you tell me how repoduce the same feature only send selected rows to the server ?

Thank you for your help

Michel

Me explique pelo menor como faço para excluir meu nome deste forum, por favor.

How do I read a cell's value instead of the data set value, so that my formatting updates based on the cell value.

I think the following reads the DATA of the column "paperwork" for each row, but the value of that CELL will be changing regularly. I don't want to have to update my data-set (and refresh my table) every time I make an edit to get my row coloring to take affect. My data gets updated with each edit, but the dataset doesn't necessarily reflect the edit. Is there a solution?

if( data.paperwork == "Approved" ) {
$('td', row).addClass( 'lightGreen' );
}else if(data.paperwork =="approved"){
$('td', row).addClass( 'lightGreen' );
}else if(data.paperwork =="Esigned"){
$('td', row).addClass( 'lightAmber' );
}else if(data.paperwork =="esigned"){
$('td', row).addClass( 'lightAmber' );
}},

https://jsfiddle.net/01fct73o/

I don't know how to use it I'm new to it it's a bit different than the one I'm used to. Santo Domingo is a tad different with things.

I had a workflow for adding checkboxes to the top of data tables and picking up that value (true or false) in the MVC controller.

That old workflow that I invented does not work with editor.

Is there an easy way to put a checkbox next to the search box where I can then pickup the value in a MVC Controller perhaps via a form request?

My project now requires users to select Name first before selecting any other dropdown. To accomplish this, I want to convert the first dropdown (Name) into checkboxes (keeping the same filtering). Is it possible to convert only the Name column dropdown into checkboxes.

Here is the latest code I am working on. https://jsfiddle.net/mL9f58wg/
Thanks.

So I believe I have made a successful PDO connection to MSSQL server but when I run the following I get empty arrays:

Editor::inst( $db, 'ALLPRODUCTS', 'nseq' )
->fields(
Field::inst( 'citemno' ),
Field::inst( 'cdescript' ),
Field::inst( 'cmanufacturer' ),
Field::inst( 'cproducttype1' ),
Field::inst( 'cproducttype2' ),
Field::inst( 'quantity' ),
Field::inst( 'cuom' ),
Field::inst( 'price' ),
Field::inst( 'subtotal' )
)
->process( $_POST )
->json();

Response: {"data":[],"options":[],"files":[]}

I've been trying to figure it out but i just can't. I have this table with only one column which is paginated ( every 15 tr ) but i want to show like 30 trs in two columns, to fill empty space and make less pages

I figured there is some way to do it with odd and even. I tried "<'row'<'col-6 odd'tr><'col-6 even'>>" but that doesn't work, it just puts everything in the 2nd col

Link to test case: https://live.datatables.net/mimifosi/1/edit ( I tried to provide a test case, but for some reason it's giving me an error on line 7!? Can you tell me what is wrong with the test case? ) Page: https://bit.ly/423kGvi
Error messages shown: None
Description of problem: I have a button to toggle the value of a column in the select row. But when I click on it, the other columns are changed as well. the "Concluir" button, make the change i want, but also deletes the value on "Marca" column.

Hi all,
I want to update only single column via ajax. Datatable is initialized first from database then after loading all data i want to periodically update one column with another ajax source.

I've created a function and i called it after:

$(document).ready(function(){

function is simple i called a get link which gives me id and data, id is which row cell i want to update.

now the problem is how to display data where id is

https://editor.datatables.net/examples/extensions/import.html
I have recreated your excellent example at the link above on my server and it works just like the demo. The tables populate, I can select all, edit, and export to csv but when I click the Import CSV button on the top menu, the popup opens and I click the button to select a file but the file explorer doesn't load. There are no errors shown in the chrome console, it just does nothing at all. Any ideas ?

Good morning, I find myself with a problem that is difficult to understand, I am currently working with PHP/BootStrap 5

I have 2 tables on the same page, the first one loads through ajax and datatable without problem, then I use another second table that I show by modal, when I go to show this second table it gives me an error that datatable is not a function, Tables have different ID

For the modal tests, I have used the table and the javascript of this example, I don't know if to have two tables you have to type some kind of extra code... thanks

https://datatables.net/examples/styling/bootstrap5.html

var dt_basic_table1 = $('#RequestList');
dt_basic_table1.DataTable().clear();
if (dt_basic_table1.length) {

        var status = $('input[name="Status"]:checked').val();
        if (status == undefined || status == "Pending")
            status = "P";
        else if (status == "Completed")
            status = "C";
        else status = "P";

        var url = dt_basic_table1.data('request-url');
        var dt_fixedheader1 = dt_basic_table1.DataTable({
            paging: true,
            ordering: true,
            info: true,// control table information display field
            Processing: true,// control the processing indicator.       
            language: { "processing": '<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>' },
            serverSide: true,// recommended to use serverSide when data is more than 10000 rows for performance reasons
            destroy: true,
            ajax: {
                url: url,
                type: 'POST',
                data: function (d) {
                    return $.extend({}, d, {
                        "extra": [
                            {
                                "field": "status",
                                "value": status
                            },

                        ]
                    });
                }
            },
            columns: [
                { data: '' },
                { data: 'Name' },
                { data: 'Email' },
                { data: 'Currency' },
                { data: 'ReferenceNo' },
                { data: 'CreatedAt' },
                { data: '' }
            ],
            columnDefs: [                    
                {
                    // For Responsive
                    className: 'control',
                    orderable: false,
                    targets: 0,
                    searchable: false,
                    render: function (data, type, full, meta) {
                        return '';
                    }
                },
                {
                    // Actions
                    targets: -1,
                    title: 'Actions',
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return (

                            '<div class="btn btn-sm btn-icon item-edit"><i class="text-primary ti ti-pencil"></i></div>'
                        );
                    }
                }
            ],
            order: [[1, 'desc'], [2, 'desc'], [3, 'desc']],
            dom: '<"card-header flex-column flex-md-row"<"head-label text-center"><"dt-action-buttons text-end pt-3 pt-md-0"B>><"row"<"col-sm-12 col-md-2"l><"col-sm-12 col-md-4 toolbar"frtip><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            displayLength: 10,
            lengthMenu: [10, 25, 50, 75, 100],
            buttons: [
                {
                    extend: 'collection',
                    className: 'btn btn-label-primary dropdown-toggle me-2',
                    text: '<i class="ti ti-file-export me-sm-1"></i> <span class="d-none d-sm-inline-block">Export</span>',
                    buttons: [

                        {
                            extend: 'excel',
                            text: '<i class="ti ti-file-spreadsheet me-1"></i>Excel',
                            className: 'dropdown-item',
                            title: "Bank Deposits",
                            action: function () {
                                ExportToExcel();
                            },

                        }
                    ]
                },
                {
                    text: '<i class="ti ti-plus me-sm-1"></i> <span class="d-none d-sm-inline-block">CREATE DCB</span>',
                    className: 'create-new btn btn-primary'
                }
            ],
            responsive: {
                details: {
                    display: $.fn.dataTable.Responsive.display.modal({
                        header: function (row) {
                            var data = row.data();
                            return 'Details of ' + data['full_name'];
                        }
                    }),
                    type: 'column',
                    renderer: function (api, rowIdx, columns) {
                        var data = $.map(columns, function (col, i) {
                            return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
                                ? '<tr data-dt-row="' +
                                col.rowIndex +
                                '" data-dt-column="' +
                                col.columnIndex +
                                '">' +
                                '<td>' +
                                col.title +
                                ':' +
                                '</td> ' +
                                '<td>' +
                                col.data +
                                '</td>' +
                                '</tr>'
                                : '';
                        }).join('');

                        return data ? $('<table class="table"/><tbody />').append(data) : false;
                    }
                }
            }
        });


    }

This is my code

Hello everyone I am trying to show the information in the Jquery dataTable getting the data through ajax the server response brings me the data, but when showing the information in the table it shows me nothing.

please anything would help me

this is my js code:

function generarDataTable() {
        if(validarFormulario()){
            var datos=$("#filtroFichas").serialize();
            
            //DataTables para las fichas
            if(tblFichas != null)
            {
                tblFichas.destroy();
            }

            tblFichas = $('#dtFichas').DataTable({
                dom: 'Bfrtip',
                "lengthMenu": [ [ 10, 50, 100, 500, 1000], [10, 50,100,500, 1000] ],
                stateSave: true,
                "processing": true,
                "serverSide": true,
                "ajax":/*{*/function (data, callback, settings){
                    $.ajax({
                        url: '<?= RUTAW ?>/secciones/bienestarsocial/ajaxserver.php',
                        method: 'POST',
                        data: new FormData(document.querySelector("#filtroFichas")),
                        processData: false,   // !importawnt
                        contentType: false,   // !important
                    })
                    .done(function(data) {
                        callback(data);
                        console.log(data);  
                    })
                },
                "columns": [
                    <?= (in_array('A', $privs) ? '{ name:"check", "data": "check", "bSortable": false,"sWidth": "1%"  },':''); ?>
                    { "name":"id", "data": "id", "sClass": "dt-center","sWidth": "1%"  },
                    <?php if($fichaModelo->getAtributoTipo('habilitar_clasificacion')): ?>
                    { "name":"clasificacion", "data": "clasificacion", "sClass": "dt-center","sWidth": "1%"  },
                    <?php endif; ?>
                    { "name":"codigo", "data": "codigo", "sClass": "dt-center","sWidth": "1%"  },
                    { "name":"fecha", "data": "fecha", "sClass": "dt-nowrap","sWidth": "1%"  },
                    { "name":"municipio", "data": "municipio", "sClass": "dt-center","sWidth": "1%"   },
                    { "name":"barrio", "data": "barrio", "sClass": "dt-center"  },
                    { "name":"direccion", "data": "direccion", "sClass": "dt-center","sWidth": "7%" },
                    <?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
                    { "name":"cabeza", "data": "cabeza" },
                    <?php endif; ?>
                    { "name": "asociados", data: "asociados"},
                    <?php if($fichaModelo->getAtributoTipo('habilitar_telefono')): ?>
                    { "name": "telefono", "data": "telefono", "sClass": "dt-right","sWidth": "7%" },
                    <?php endif;

                        if($camposDataTable && isset($camposDataTable['headersDt']) && strlen($camposDataTable['headersDt'])>0)
                        {
                            echo $camposDataTable['headersDt'];
                        }
                    ?>
                    <?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
                    { "name":"cantidad_personas", "data": "cantidad_personas", "sClass": "dt-nowrap","sWidth": "1%" },
                    <?php endif; ?>
                    <?php if(_BSFICHA_RIESGO): ?>
                    { "name":"calificacion", "data": "calificacion", "sClass": "dt-center","sWidth": "1%"  },
                    <?php endif;
                        if(_BSFICHA_HABILITAR_ESTADO): ?>
                    { "name":"estado", "data": "estado", "sClass": "dt-center","sWidth": "1%"  },
                    <?php endif; ?>
                    <?php if(_BSFICHA_GEOREFERENCIAR): ?>
                    { "name": "geolocalizacion", data: "geolocalizacion", sClass: "dt-center", sWidth: "1%"},
                    <?php endif; ?>
                    { "name":"ver", "data": "ver", "bSortable": false ,"sWidth": "1%"  },
                    { "name":"editar", "data": "editar", "bSortable": false ,"sWidth": "1%"  }
                ],
                buttons: [
                    {
                        extend: 'colvis',
                        columns: ':not(".noVis")', //Ocultar columnas que tengan determinada clase en el th (ejemplo class="noVis")
                    },
                    'pageLength',
                ],
                "language": {
                    "url": "<?= RUTAW?>/lib/js/jquery/datatables1.10.11/Spanish.json",
                    buttons: {
                        colvis: 'Columnas',
                        pageLength: {
                            "_": "Mostrar %d registros",
                            "-1": "Mostrar todos"
                        }
                    }
                },
                "bFilter": false,
                "order": [[2, "asc"]],
                //"columnDefs": [ { "visible": false, "targets": 0 }]
                columnDefs: [{
                    targets: "sVis",
                    visible: false
                }],
            });
            

            if(esFiltro)
            {
                tblFichas.page('first').draw('page');
                esFiltro = false;
            }

            return false;
        }
    
    }


this is my HTML code:

<!--Tabla para las fichas-->
        <table id="dtFichas" class="display stripes" cellspacing="0" width="100%">
            <thead>
            <tr>
                <?= (in_array('A', $privs) ? '<th width="1%" class="noVis"></th>' : ''); ?>
                <th width="1%" nowrap class="sVis">ID</th>
                <?php if($fichaModelo->getAtributoTipo('habilitar_clasificacion')): ?>
                    <th width="1%" class="sVis">Clasificación</th>
                <?php endif; ?>
                <th width="1%" nowrap><?= $fichaModelo->getAtributoTipo('etiqueta_codigo')?></th>
                <th width="1%" nowrap>Actualización</th>
                <th width="1%"><?= $fichaModelo->getAtributoTipo('etiqueta_municipio') ?></th>
                <th width="1%"><?= $fichaModelo->getAtributoTipo('etiqueta_barrio') ?></th>
                <th><?= $fichaModelo->getAtributoTipo('etiqueta_direccion') ?></th>
                <?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
                <th><?= $fichaModelo->getAtributoTipo('etiqueta_cabeza_familia') ?></th>
                <?php endif; ?>
                <th class="sVis">Usuarios</th>
                <?php if($fichaModelo->getAtributoTipo('habilitar_telefono')): ?>
                    <th>Teléfono</th>
                <?php endif;

                if($camposDataTable && isset($camposDataTable['headers']) && strlen($camposDataTable['headers'])>0)
                {
                    echo $camposDataTable['headers'];
                }
                ?>
                <?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
                <th width="1%" class="noVis"><img title="Personas asociadas a la ficha" border="0" src="/sgi/lib/img/users.png"></th>
                <?php endif;
                    if(_BSFICHA_RIESGO): ?>
                    <th><?= _BSFICHA_ETQ_RIESGO ?></th>
                <?php endif; ?>
                <?php if(_BSFICHA_HABILITAR_ESTADO): ?>
                    <th>Estado</th>
                <?php endif ?>
                <?php if(_BSFICHA_GEOREFERENCIAR): ?>
                    <th class="noVis"></th>
                <?php endif; ?>
                <th class="noVis"></th>
                <th class="noVis"></th>
            </tr>
            </thead>
        </table>

this is my response from the server:

{"recordsTotal":"56","recordsFiltered":"56","data":[{"check":"<input type=\"checkbox\" name=\"fichas[]\" id=\"ficha_7022\" value=\"7022\" class=\"cbx fichasId\" >","id":"7022","codigo":"<a href=\"\/sgi\/secciones\/index.php?a=bienestarsocial&option=editarFicha&fichaId=7022\" title=\"7022\">123<\/a>","fecha":"<a href=\"\/sgi\/secciones\/index.php?a=bienestarsocial&option=editarFicha&fichaId=7022\">2021-05-03<\/a>","municipio":"Tumaco","barrio":"Brisas del Mar","direccion":"","cabeza":"","asociados":null,"clasificacion":"","cantidad_personas":"<span class=\"sgitag\">1<\/span>","calificacion":1,"ver":"

<

div class=\"btnlupa\" onclick=\"verFicha(7022);\"><\/div>","editar":"

<

div onclick=\"document.location.href='\/sgi\/secciones\/index.php?a=bienestarsocial&option=editarFicha&fichaId=7022'\" class=\"btnedit\"><\/div>","eliminar":"

<

div onclick=\"eliminarFicha(7022)\" class=\"btncan\"><\/div>","telefono":null,"estado":"A","geolocalizacion":""}

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

Hello,

I have some fields where I need to perform particular filterings, for instance an "exact match" search (but I have also other, more complex, use cases). Therefore I marked the fields as searchable: false in the JS definition and I'm handling the search server side (.NET):

For instance:

var searchedId = Request["columns[0][search][value]"];
if (!string.IsNullOrEmpty(searchedId) && int.TryParse(searchedId, out int n))
editor = editor.Where("Main.Id", n, "=");

So far, so good.

The problem is that the query that counts the recordsTotal is now different from the normal behaviour:
- Normally the query is something like: SELECT COUNT( Main.Id ) as 'cnt' FROM [Main]
- When performing the where clause in .NET, the query is something like: SELECT COUNT( Main.Id ) as 'cnt' FROM [Main] LEFT JOIN [Projects] ON [Projects].[Id] = [Main].[Project_Id] LEFT JOIN [Tasks] ON [Tasks].[Id] = [Main].[Task_Id] LEFT JOIN ... WHERE [Main].[Id] = @where_0

Basically every linked table is added to the recordsTotal query.

The query then returns 1, so in the editor is impossible to see the total number of records.

Seems a bug to me, but maybe I'm doing something wrong.

Thanks!

I have the following datatable code. It seems to work all perfectly.
The only thing that I note is an errore in the chrome console:

jquery.min.js:2 jQuery.Deferred exception: Cannot read properties of null (reading 'columns') TypeError: Cannot read properties of null (reading 'columns')
    at s.<anonymous> (https://www.mysite.com/index.php:1223:33)
    at s.<anonymous> (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:140:320)
    at s.iterator (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:100:432)
    at s.<anonymous> (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:140:287)
    at s.every (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:103:3)
    at S.fn.init.initComplete (https://www.mysite.com/index.php:1202:34)
    at https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:76:160
    at Function.map (https://www.mysite.com/ca/an/plugins/jquery/jquery.min.js:2:3536)
    at r (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:76:109)
    at ua (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:49:293) undefined
S.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: Cannot read properties of null (reading 'columns')
    at s.<anonymous> (sctan_index.php:1223:33)
    at s.<anonymous> (jquery.dataTables.min.js:140:320)
    at s.iterator (jquery.dataTables.min.js:100:432)
    at s.<anonymous> (jquery.dataTables.min.js:140:287)
    at s.every (jquery.dataTables.min.js:103:3)
    at S.fn.init.initComplete (sctan_index.php:1202:34)
    at jquery.dataTables.min.js:76:160
    at Function.map (jquery.min.js:2:3536)
    at r (jquery.dataTables.min.js:76:109)
    at ua (jquery.dataTables.min.js:49:293)

This is the code i used:

<script src="plugins/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="plugins/jszip/jszip.min.js"></script>
<script src="plugins/pdfmake/pdfmake.min.js"></script>
<script src="plugins/pdfmake/vfs_fonts.js"></script>
<script src="plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script type="text/javascript" src="../build/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="plugins/sweetalert2/sweetalert2.min.js"></script>
<link rel="stylesheet" href="plugins/sweetalert2/sweetalert2.min.css">  
<script src="//cdn.datatables.net/plug-ins/1.10.13/sorting/datetime-moment.js"></script>

var groupColumn = 0;
var table = $('#tbl').DataTable({

      paging: false,
      responsive: true,
      stateSave: true,
      dom: 'Bfrtip',

      "ordering": false,


    columnDefs: [

            {
                "targets": [ 0,6,7 ],
                "visible": false,
                "searchable": false
            },

                 {

        "orderable": false,
        targets: 10,
            render: function (data, type, row) {
          if ( type === 'filter' ) {
            return data.replace(/<[^>]*>?/gm, '');
          }
          return data;
        }
            }
        ],


    buttons: [
        {
                text: 'TEXT1',
                attr: {id: 'tabtop_inarrivo' }, 
                action: function ( e, dt, node, conf ) {
                  window.location.assign("index.php")
                }
            },
            {
                text: 'TEXT2',
                attr: {id: 'tabtop_inprevisione' },
                action: function ( e, dt, node, conf ) {
                  window.location.assign("index_2.php")
                }
            }
    ],

      initComplete: function () {

      var states = this.api().state.loaded();

      this.api().columns( [11] ).every( function () {
        this.visible(false);
    } );

      this.api().columns( [10] ).every( function () {
        var column = this;

        var select = $('<select><option value="" style="text-align: center"><strong>STATUS</strong></option></select>')
        .appendTo( $(column.header()).empty() )
        .on( 'change', function () {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
          .search( val ? '^'+val+'$' : '', true, false )
          .draw();
        } );


        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d.replace(/<[^>]*>?/gm, '')+'">'+d+'</option>' )
        } );

        var colIndex = column.index();
        var searchTerm = states.columns[colIndex].search.search;

        searchTerm = searchTerm.replace(/^\^/gm ,'')
        searchTerm = searchTerm.replace(/\$$/gm ,'')

        $( 'select', column.header() ).val(searchTerm);


      } );
    },


    "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                  if (group == moment().format('DD/MM/YYYY')  ) {

                    $(rows).eq( i ).before(
                        '<tr class="group" style="background-color: #41617e !important; color:#FFFFFF; font-weight: bold; font-size: 14px; margin-top: 40px"><td colspan="10">'+group+' <sup style="background-color: #FFFFFF; color: #003768; padding: 0 2px 0 2px; border-radius: 2px; font-size: 11px; margin-left: 5px; top: -1px !important;">TODAY</sup></td></tr>'
                        );
                        last = group;

                      }

                      else {
                        $(rows).eq( i ).before(
                        '<tr class="group" style="background-color: #41617e !important; color:#FFFFFF; font-size: 14px; font-weight: bold;"><td colspan="10">'+group+'</td></tr>'

                      )
                      last = group;
                      }
                }
            })

        },
});


new $.fn.dataTable.Buttons( table, {


    buttons: [
      { extend: 'csv', text: 'CSV',
        exportOptions: {
          "format": {
      "header": function(content, index) {
        return index === 10 ? "STATE" : content;
      },
    },
          columns: [ 0, 1, 2, 3, 4, 11, 10 ]
              },
               },
        { extend: 'excel', text: 'EXCEL', title: 'LOADING', 
        exportOptions: {
          "format": {
      "header": function(content, index) {
        return index === 10 ? "STATE" : content;
      },
    },
          columns: [ 0, 1, 2, 3, 4, 11, 10 ]
              },
               },
        { extend: 'pdf', text: 'PDF', title: 'LOADING', 
        exportOptions: {
          "format": {
      "header": function(content, index) {
        return index === 10 ? "STATE" : content;
      },
    },
          columns: [ 0, 1, 2, 3, 4, 11, 10]
              },
               },
        { extend: 'print', text: 'STAMPA', title: 'LOADING',   
        exportOptions: {
          "format": {
      "header": function(content, index) {
        return index === 10 ? "STATE" : content;
      },
    },
          columns: [ 0, 1, 2, 3, 4, 11, 10]
              },
               }
    ]

    } );
    table.buttons( 1, null ).container().appendTo(
        table.table().container()
    );

When i refresh the page the error in the console doesn't show anymore... but when i reload for the first time the error is there again...

Link to test case: https://live.datatables.net/quhetubo/1/edit
Debugger code (debug.datatables.net): https://debug.datatables.net/ahigiq
Error messages shown: None
Description of problem:
Hi there,

In the example provided, a condition is passed to a searchbuilder criteria by JavaScript.
The searchbuilder uses a button so it's not initially displayed. Once search builder button is clicked we can see the conditions.

All works as expected except for the alignment of the "And" and "Or" buttons.

Once I press F12 twice it corrects itself.
It looks like the style width, left and top of dtsb-logicContainer are all 0 instead of the correct numbers.

Is there a way to "redraw" this?

Thanks

I added a "Duplicate" button into my table, and the background color of the button disappeared. The "Add" button and "Edit" button do not have such problem, but only the "Duplicate" button. How to fix it? Thank you.

I can get the datatable to display records but when I attempt to add the call for the editor I can't get it to work. I am basically looking to connect the datatables/editor like a spreadsheet editor for my MSSQL data. I have tried the sample code and I just keep getting more and more confused as to how everything works together properly. For instance, is there supposed to be only one PHP file that handles everything and onve JS file that initialises everything? Does anyone have a codepen or something similar where I can see someone elses implemenation working to use as reference?

I need help, please!

Hi, we have data in a table but we want the row to grow to fit the data rather than scroll. Is that possible?