//Buttons examples
let table = $('#datatable-buttons').DataTable({
    lengthChange: false,
    buttons: ['copy', 'print'],
    "language": {
        "paginate": {
            "previous": "<i class='mdi mdi-chevron-left'>",
            "next": "<i class='mdi mdi-chevron-right'>"
        }
    },
    "drawCallback": function () {
        $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
    }
});

// Multi Selection Datatable
$('#selection-datatable').DataTable({
    select: {
        style: 'multi'
    },
    "language": {
        "paginate": {
            "previous": "<i class='mdi mdi-chevron-left'>",
            "next": "<i class='mdi mdi-chevron-right'>"
        }
    },
    "drawCallback": function () {
        $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
    }
});

table.buttons().container()
        .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

I'm not realized updating since 1 month. in september the function was recognized and now not. Why ???
Please help me to fix this bug.
Thanks you!

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I am trying to get the id of the entire datatset that is passed to AJAX, and display it in an array on the page, in a way that the array refreshes everytime the page reload. I have the following code:

$ ->
$('#people-pr-datatable').dataTable
processing: true
order: []
serverSide: true
drawCallback: ->
people_ids = @api().rows().data().map (people) -> people.DT_RowId
$("#filtered-data").html people_ids.join()
console.log(this.fnSettings().fnRecordsTotal());
ajax: data: (d) ->
d.url = $('#people-pr-datatable').data('source');

i am able to display the ids of only the current page in the filtered-data div. But i would like to display all the ids of my table i if possible. What would be the right way please ?

Description of problem: I am trying to get the id of the entire datatset that is passed to AJAX, and display it in an array on the page, in a way that the array refreshes everytime the page reload. I have the following code:

$ ->
$('#people-pr-datatable').dataTable
processing: true
order: []
serverSide: true
drawCallback: ->
people_ids = @api().rows().data().map (people) -> people.DT_RowId
$("#filtered-data").html people_ids.join()
console.log(this.fnSettings().fnRecordsTotal());
ajax: data: (d) ->
d.url = $('#people-pr-datatable').data('source');

i am able to display the ids of only the current page in the filtered-data div. But i would like to display all the ids of my table i if possible. What would be the right way please ?

Field::inst( 'tbl_con.id' ),
Field::inst( 'aud' )
->validator( Validate::required() )
->options( Options::inst()
->table( 'tbl_ram_exit_aud' )
->value( 'aud' )
->label( 'aud' )
->order( 'aud asc' )
->where('regionname', $variable ) How to put tbl_con.id value to $variable?

I want to send email with attached Excel created from Datatables buttons.
I created controller to send email.
and created datatables to export excel
I do not know how to get the excel in ajax to send to controller.
this is my code but it is not working

$('#example-table').DataTable({
dom: 'Blfrtip',

        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Data',
                text: 'Export To Excel',
                exportOptions: {
                    format: {
                        body: function (inner, rowidx, colidx, node) {
                            if ($(node).children("input").length > 0) {
                                return $(node).children("input").first().val();
                            } else {
                                return inner;
                            }
                        }
                    }


                },

                action: function (e, dt, node, config) {

                   //var files = $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);

                    var table = $('#example-table').DataTable();

                    var data = table.buttons.exportData();
                    var files = $("#fileUploader").get(0).files[0];
                    var url = "/test/SendEmail";
                    formData = new FormData();
                    formData.append("fileUploader", files);

                    jQuery.ajax({
                        type: 'POST',
                        url: url,
                        data: formData,
                        dataType: 'xlsx',
                        cache: false,
                        contentType: false,
                        processData: false,

                    });


                }
            },              

        ]

Using the following code to use datatables:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.12.1/b-2.2.3/fc-4.1.0/fh-3.2.4/r-2.3.0/sl-1.4.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.12.1/b-2.2.3/fc-4.1.0/fh-3.2.4/r-2.3.0/sl-1.4.0/datatables.min.js"></script>

Using Bootstrap 5 I am initialising the table using the DOM attributes as below:

 <table class="table align-middle dtselect nowrap table-hover" data-page-length='10' data-fixed-columns='{"left":2,"right":1}' width="100%">

What I am finding is that a new element is created on my page that I am not in control of and is positioned in my navbar as a white line covering up some text in my navigation as you can see from this image a line covering up the Help button:

When inspecting the element, this is what I find at the very end of the page.

<div class="dtfc-right-top-blocker" style="inset: 0px 0px 0px 1449.67px; display: block; position: absolute; width: 1px; height: 42.3125px; z-index: 1;"></div>

It appears that the element is being added to the body of the page rather than the table container. The table appears to display correctly and function as I would expect. The line disappears when I remove the data-fixed-columns='{"left":2,"right":1}' code on the table element.

Has anyone else had a similar issue or know how to remedy this?

Many thanks,
Paul

1. I'm trying to export to CSV but font craft as link below. User do it on Window Japanese language, default Shift JIS code.

2. When export if datatabe have first colume is select checkbox, how can remove it when export.

https://www.craft.do/s/f9GpRW5VOAhrGO

Hi,

I am using colReorder with stateSave": true and "colReorder": true.
When I reorder the column and keep hitting the destroy button, the column header gets reset on alternate destroy while the data retain its state.

Live Example: http://live.datatables.net/kololufo/20/edit

The goal would to programmatically save the excel, csv, etc file to a local directory.

I thought I could use the button.trigger() event but I'm uncertain what the syntax is.

I'm using this page to test:

https://datatables.net/extensions/buttons/examples/initialisation/export.html

Thanks!

I am using Inline Editor onBlur: 'submit' give error white editing one field is active for editing if clicked any other editable field in datatable
dataTables.editor.min.js:21 Uncaught TypeError: Cannot read properties of undefined (reading 'attach')
at Editor.inline (dataTables.editor.min.js:21:90147)
at HTMLTableElement.<anonymous> (dataTables.editor.min.js:21:90303)

Using the following code to use datatables:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.12.1/b-2.2.3/fc-4.1.0/fh-3.2.4/r-2.3.0/sl-1.4.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.12.1/b-2.2.3/fc-4.1.0/fh-3.2.4/r-2.3.0/sl-1.4.0/datatables.min.js"></script>

Using Bootstrap 5 I am initialising the table using the DOM attributes as below:

<table class="table align-middle dtselect nowrap table-hover" data-page-length='10' data-fixed-columns='{"left":2,"right":1}' width="100%">

and JavaScript:

let dtSelect = $('.dtselect').DataTable({
        select      : "multi+shift",
        buttons     : ['selectAll', 'selectNone'],
        scrollX     : true,
        fixedHeader : true,
        stateSave   : true,
        dom         : "<'d-md-flex justify-content-between'Brlf>t" +
                      "<'d-md-flex justify-content-between'ip>"
    });

What I am finding is that a new element is created on my page that I am not in control of and is positioned in my navbar as a white line covering up some text in my navigation as you can see from this image a line covering up the Help button:

When inspecting the element, this is what I find at the very end of the page.

<div class="dtfc-right-top-blocker" style="inset: 0px 0px 0px 1449.67px; display: block; position: absolute; width: 1px; height: 42.3125px; z-index: 1;"></div>

It appears that the element is being added to the body of the page rather than the table container. The table appears to display correctly and function as I would expect. The line disappears when I remove the data-fixed-columns='{"left":2,"right":1}' code on the table element.

My working example can be found here: http://live.datatables.net/wiritega/3/edit?html,js,output

Has anyone else had a similar issue or know how to remedy this?

Debug information can be found here: https://debug.datatables.net/edihus

Many thanks,
Paul

Hello,

I'm trying to show some fetch data in a datatable, but for some reason, it does not work. It gives the following error: DataTables warning: table id=all-users-datatable - Requested unknown parameter '0' for row 0, column 0

The code is a follows:

PHP:

$arr = [];

    $users = User::with('role')->get(['name', 'company', 'email', 'location', 'recent_login']);


    foreach($users as $user)
    {
        $arr['data'][] = (object) [
                           'name' => $user->name, 
                           'company' => $user->company, 
                           'email' => $user->email, 
                           'role' => $user->role->name, 
                           'location' => $user->location,
                           'recent_login' => $user->recent_login,
                           'actions' => 'Tester'
                          ];
    }



    return response()->json($arr);

HTML:

jQuery:

$('#all-users-datatable').DataTable(
{
processing: true,
serverSide: true,
ajax: '/get-users',
columns: [
{ data: 'name' },
{ data: 'company' },
{ data: 'email' },
{ data: 'role' },
{ data: 'location' },
{ data: 'recent_login login' },
{ data: 'actions' }
]
});

What am I missing?

Hi @allan ,

I'm using inline editing for a table. I have designed it so that when the users click on the Other column, a bubble box pops up and requires them to enter values for both Other and Comment. However, the content of the Comment column is cut off when I edit it. I want to expand or dynamically resize the Comment box to fit with the text while editing, but wasn't able to find a solution.

Same logic for inline editor, is there a way to avoid the inline edit text box from resizing? I have attached a photo of the row with the full text and the "cut-off" version of it while editing.

Thanks a lot!

I have server-side pagination, so every time I change the page, the table initializes again. the sorting works fine if you're on page 1 but if you move to another page the sorting is a mess.

I see that datatables has an api to put column summaries in the footer.
I've seen reference to editor not having that functionality.
Has that status changed? Is there an easy way for me to implement it in Editor?
Thanks

I have 2 time fields, which are just time, no date. I am trying to figure out the syntax for server side and client side.

I think the js is close to this:

                , { "label": "shift start:", "name": "rr_analyst.shift_start"
                    , format: "HH:mm"
                    , type: "datetime"
                    , "fieldInfo": "US style HH:mm format"
                }
                , { "label": "shift end:", "name": "rr_analyst.shift_end"
                    , format: "HH:mm"
                    , type: "datetime"
                    , "fieldInfo": "US style HH:mm format"
                }

I am fairly sure that if they were date time, the server side would need this:

            Field::inst('rr_analyst.shift_start')
                    /* MIGHT NOT BE DONE */
                ->getFormatter(Format::dateSqlToFormat('m/d/Y'))
                ->setFormatter(Format::datetime('m/d/Y','Y-m-d'))
                ->validator(Validate::dateFormat('m/d/Y')),

            Field::inst('rr_analyst.shift_end')
                    /* MIGHT NOT BE DONE */
                ->getFormatter(Format::dateSqlToFormat('d/m/Y'))
                ->setFormatter(Format::datetime('d/m/Y','Y-m-d'))
                ->validator(Validate::dateFormat('d/m/Y')),

But I can find no comments in the docs or forum as to what this should be for time fields. I would like to display as 2 digit hours, 2 digit minutes on a 24 hour clock.. I would like to write to the DB as 2 digit hours, 2 digit minutes, 2 digit seconds on a 24 hour clock. Something like this:

            Field::inst('rr_analyst.shift_start')
                    /* MIGHT NOT BE DONE */
                ->getFormatter(Format::dateSqlToFormat('h:i'))
                ->setFormatter(Format::datetime('h:i','h:i:s'))
                ->validator(Validate::dateFormat('h:i')),

            Field::inst('rr_analyst.shift_end')
                    /* MIGHT NOT BE DONE */
                ->getFormatter(Format::dateSqlToFormat('h:i'))
                ->setFormatter(Format::datetime('h:i','h:i:s'))
                ->validator(Validate::dateFormat('h:i')),

I have a table that loads data by ajax serverside
And I also enable export excel
the issue is how to get the current data of all the filtered/seraced rows to export ?

I want to create custom button that grab the current state ( filter / search ) for all pages

If there is a code to the button and how to grab the whole data

this is a continuos of my prev question https://datatables.net/forums/discussion/74234/get-the-whole-state-of-current-serverside-data-to-export/p1?new=1

Description of problem: Hello, I'd like to recognize in the backend requests made by the datatables library. Does the library issue any specific headers with its requests?

Hi everyone!

I am populating a table with php making a sql query and then a foreach loop in the html code echoeing the column values. Its a weird table because I'm able to edit it directly and values are saved back to the server with AJAX.
I followed this example to implement filtering but when I write anything in any field, I have no reuslts. If I switch my table to a fully html table, it works just fine.

The table:

<table id="tblTrabajos" class="table table-bordered table-striped" style="width: 2000px;">
          <thead>
          <tr>
            <th>Acciones</th>
            <th>Código</th>
            <th>Empresa</th>
            <th>Actividad</th>
            <th>Categoria</th>
            <th>Revisor</th>
            <th>Fecha auditoría</th>
            <th>Alerta auditoría</th>
            <th>Auditor</th>
            <th>Calificación</th>
            <th>Última modificación</th>
          </tr>
          </thead>
          <tbody>
            <?php foreach($trabajos as $fila): ?>
              <tr>
                <td class="acciones">
                  <a id="editar<?php echo $fila->id ?>" class="btn btn-info edit" onclick="editar(this)"><i class="far fa-edit"></i></a>
                  <a id="guardar<?php echo $fila->id ?>" class="btn btn-success save disabled" onclick="guardar(this)"><i class="far fa-save"></i></a>
                  <a id="borrar<?php echo $fila->id ?>" class="btn btn-danger delete" onclick="borrar(this)"><i class="far fa-trash-alt"></i></a>
                </td>
                <td><input type="text" class="form-control readOnlyInput sece <?php echo $fila->id ?>" name="codigo" value="<?php echo $fila->codigo ?>" readonly></td>
                <td><input type="text" class="form-control readOnlyInput sece <?php echo $fila->id ?>" name="empresa" placeholder="Introduce la empresa" value="<?php echo $fila->empresa ?>" readonly></td>
                <td><input type="text" class="form-control readOnlyInput sece <?php echo $fila->id ?>" name="actividad" placeholder="Introduce la actividad" value="<?php echo $fila->actividad ?>" readonly></td>
                <td><input type="text" class="form-control readOnlyInput sece <?php echo $fila->id ?>" name="categoria" placeholder="Introduce la categoría" value="<?php echo $fila->categoria ?>" readonly></td>
                <td>
                  <select name="revisor" class="custom-select <?php echo $fila->id ?>" disabled>
                    <option value="">--Seleccionar revisor--</option>
                    <?php foreach($revisores as $revisor): ?>
                      <option value="<?php echo $revisor->id ?>" <?php if($revisor->id == $fila->revisor){echo "selected";} ?>><?php echo $revisor->nombre . " " . $revisor->apellidos?></option>
                    <?php endforeach; ?>
                  </select>
                </td>

                <td><input type="text" class="form-control readOnlyInput sece <?php echo $fila->id ?>" name="fecha_audit" placeholder="Fecha de auditoría" value="<?php if($fila->fecha_audit != "0000-00-00"){echo date("d/m/Y", strtotime($fila->fecha_audit));} ?>" readonly></td>
                <td class="alerta-auditoria"><input id="al-aud-<?php echo $fila->id ?>" type="text" class="form-control readOnlyInput alertaAuditoria <?php echo $fila->id ?>" name="fecha_audit" placeholder="Días hasta auditoría" value="<?php echo $fila->dias_hasta_audit ?>" readonly></td>

                <td>
                  <select name="auditor" class="custom-select <?php echo $fila->id ?>" disabled>
                    <option value="">--Seleccionar auditor--</option>
                    <?php foreach($auditores as $auditor): ?>
                      <option value="<?php echo $auditor->id ?>" <?php if($auditor->id == $fila->auditor){echo "selected";} ?>><?php echo $auditor->nombre . " " . $auditor->apellidos?></option>
                    <?php endforeach; ?>
                  </select>
                </td>

                <td><input type="text" class="form-control readOnlyInput sece <?php echo $fila->id ?>" name="calificacion" placeholder="Introduce la calificaciónd" value="<?php echo $fila->calificacion ?>" readonly></td>
                <td><input type="text" class="form-control readOnlyInput" name="usuario_ult_modificacion"  value="<?php echo $fila->fecha_ult_modificacion ?>" readonly></td>                          
              </tr> 
            <?php endforeach; ?>
          </tbody>                  
        </table>

The datatables script:

<script>
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#tblTrabajos thead tr').clone(true).addClass('filters').appendTo( '#tblTrabajos thead' );
    var table = $('#tblTrabajos').DataTable( {
        orderCellsTop: true,
        fixedHeader: true,
        initComplete: function() {
            var api = this.api();
            // For each column
            api.columns().eq(0).each(function(colIdx) {
                // Set the header cell to contain the input element
                var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                var title = $(cell).text();
                $(cell).html( '<input type="text" placeholder="'+title+'" />' );
                // On every keypress in this input
                $('input', $('.filters th').eq($(api.column(colIdx).header()).index()) )
                    .off('keyup change')
                    .on('keyup change', function (e) {
                        e.stopPropagation();
                        // Get the search value
                        $(this).attr('title', $(this).val());
                        var regexr = '({search})'; //$(this).parents('th').find('select').val();
                        var cursorPosition = this.selectionStart;
                        // Search the column for that value
                        api
                            .column(colIdx)
                            .search((this.value != "") ? regexr.replace('{search}', '((('+this.value+')))') : "", this.value != "", this.value == "")
                            .draw();
                        $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                    });
            });
        }
    } );
} );
</script>

Also, how can I exclude some columns? The first column is for some buttons that allow editing the row and I don't want to have the filter option there. Neither in the last column (las modification date).

Thank you!