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?)

Hi All,

I have been working with dataTables for quite some time now. I am now at a point where I would like to learn about how custom PDF exports work in dataTables. With that said, I can already make PDFs as per my convenience. The only thing I need to work on is the Addition of a custom introduction page for the PDF which wraps some information on how the users are supposed to use it and so on (like glossary and accuracy information). All of this would be text based information with a couple of images. This particular custom page will be appended to any PDF which is generated by clicking the PDF button. Any input is appreciated on this. Thanks! And DataTables Rock!

I am trying to integrate DT with my existing search function - it seems that you can't customize DT to return alternate parameters: i.e. search[value] etc. In my case it would be much easier if I could change that to 'q' for example.

If you can change the default paramater keys returned please advise.

I wanted to try this (https://datatables.net/reference/option/ajax.data):

    ajax: {
      url: $('#locations').data('source'),
      type: 'GET',
      data: {
        q: 'search value'
      }

Where 'search value' is just a clone of the 'search[value]' parameter but I seem to be at a loss how to access this. Can you do it direct from DT or do I need to look it up from the DOM etc?

My web developer can not sign in with the username and password I was given. I'm not seeing a place to spot or change my password anywhere. When I try to do it at login saying I forgot my password, I'm redirected to a page that is empty.

Right now, the software I bought cannot be used for this reason, Mulitple emails to support are going unanswered. I'd like any help you can offer on getting a new password to get my web developer access to my purchase because what I've downloaded isn't enough for him. Thanks.

In the below screenshot , I want to fetch values for column 2 and column 4 values to be fetched from database. The column 1 and Column 3 has to be hardcoded. How can I do this?

I'm attempting to implement a date picker that will narrow down a set of data. For testing purposes when I load the page everything works perfectly. When I pick a different date the goal is to reload the table with the start and end dates from the date picker, but the Search button/function fails to reload the table.

JS:

$start_date = '12/27/2019';
$end_date = '12/27/2019';
$is_date_search = 'yes';

(function($){

$(document).ready(function() {
                var table = $('#table_ordersByDay').DataTable( {

                        dom: 'Brtip',
                                "ajax":{
                                        url:"php/table.date_ordersByDay.php",
                                        type:"POST",
                                        data:{is_date_search:$is_date_search, start_date:$start_date, end_date:$end_date}
                                },
                        columns: [
                                {
                                        "data": "orders.status"
                                },
                                {
                                        "data": "orders.arrivalDateTime"
                                },
                                {
                                        "data": "orders.studyDescription"
                                }
                        ],
                        "order": [[2, 'asc']]
                } );
        } );

}(jQuery));


                $('#search').click(function(){
                        $start_date = $('#start_date').val();
                        $end_date = $('#end_date').val();
                        if(start_date != '' && end_date !='')
                        {
                                $('#table_ordersByDay').DataTable().destroy();
                                $('#table_ordersByDay').DataTable().ajax.reload();
                        }
                        else
                        {
                                alert("Both Date is Required");
                        }
                });

HTML:

     <div class="input-daterange">
      <div class="col-md-4">
       <input type="text" name="start_date" id="start_date" class="form-control" />
      </div>
      <div class="col-md-4">
       <input type="text" name="end_date" id="end_date" class="form-control" />
      </div>
     </div>
     <div class="col-md-4">
      <input type="button" name="search" id="search" value="Search" class="btn btn-info" />
     </div>
    </div>

I want to use the existing + icon feature and I want to open poppup detail when second td is clicked. Currently responsive works smoothly but the + responsive feature disappears when I activate this feature modal poppup details referance link

Summerizate: I want modal popup details to be displayed when second td is clicked without being affected by responsive feature

var assetListVM; $(function () { assetListVM = { dt: null, init: function () { window.$('.js-example-basic-multiple2').select2({ placeholder: "Tür ...", allowClear: true }); window.$('.js-example-basic-multiple3').select2({ placeholder: "Durum ...", allowClear: true }); window.$('.js-example-basic-multiple4').select2({ placeholder: "Proje ...", allowClear: true }); window.dt = window.$('#datatable').DataTable({ "proccessing": true, "serverSide": true, "ajax": { "url": '/Teklif/Get', "data": function (data) { if (startDate !== null || endDate !== null) { data.startDate = window.$('#startDate').val(); data.endDate = window.$('#endDate').val(); } if (window.DurId !== null) { data.DurIds = window.$('#DurId').val().toString(); } if (window.TurId !== null) { data.TurIds = window.$('#TurId').val().toString(); } if (window.ProId !== null) { data.ProIds = window.$('#ProId').val().toString(); } } }, "columns": [ { "title": "Sıra", "data": "Id" }, { "title": "Tarih", "data": "Tarih", "searchable": true }, { "title": "Proje", "data": "ProjeID", "searchable": true }, { "title": "Tür", "data": "TurID", "searchable": true }, { "title": "Ad", "data": "Ad", "searchable": true }, { "title": "Belge No", "data": "DokumanNo", "searchable": true, "stitle:": "DokumanNo" }, { "title": "Firma", "data": "CariID", "searchable": true }, { "title": "Yetkili", "data": "Yetkili", "searchable": true }, { "title": "Telefon", "data": "Telefon", "searchable": true }, { "title": "Açıklama", "data": "Aciklama", "searchable": true }, { "title": "Oluşturan", "data": "KulID", "searchable": true }, { "title": "Durum", "data": "DurumID", "searchable": true }, { "title": "KDV Hariç :", "data": "Toplam", "searchable": true }, { "title": "KDV Dahil :", "data": "GenelToplam", "searchable": true }, { "title": "Eylemler", "render": function (data, type, row) { const inner =<a href="/Teklif/Güncelle?id=${
row.Id}" class="on-default edit-row" title="Güncelle" data-id="${row.Id
}"><i class="fa fa-pencil"></i></a> <a href="javascript:void(0);" class="chng-status" title="Teklif Durum" data-id="${row.Id
}"><i class="fa fa-circle-o-notch" style="color:crimson;"></i></a> <a href="javascript:void(0);" class="delete-btn" title="Sil" data-id="${row.Id
}"><i class="fa fa-trash-o"></i></a>; return inner; } }, { "title": "Revize", "render": function (data, type, row) { const inner =<a href="/Teklif/GüncelleRevize?id=${
row.Id}" class="on-default edit-row" title="Güncelle" data-id="${row.Id
}"><i class="fa fa-copy"></i></a> <a href="javascript:void(0);" class="view-revision" data-id="${row.Id
}"><i class="ft-list"></i></a>; return inner; } }, { "title": "Dosya", "render": function (data, type, row) { const inner =<a href="#" class="on-default showfile-btn" title="Teklif" data-id="${row.Id
}"><i class="fa fa-file" style="color:red;"></i></a> <a href="#" class="on-default showfile-btn2" title="Arge" data-id="${row.Id
}"><i class="fa fa-file" style="color:darkcyan;"></i></a>; return inner; } } ], "createdRow": function (row) { window.$.each(window.$('td', row), function () { window.$(this).attr('class', "kisa"); }); }, 'columnDefs': [ { 'targets': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 'createdCell': function (td, cellData, rowData, row, col) { window.$(td).attr('title', cellData); if (col === 4) { window.$(td).attr('id',title-${rowData.Id}); } } } ], "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], "fnRowCallback": function (nRow, aData, iDisplayIndex) { const oSettings = this.fnSettings(); window.$("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1); return nRow; }, responsive: true }); } }; assetListVM.init(); });

CSHTM: MVC4

JS:-

<!-- DataTables -->
<link type="text/css" href="~/media/css/jquery.dataTables.min.css" rel="stylesheet">
<script type="text/javascript">

    $(document).ready(function () {
        $('#tblEmployee').DataTable({
            "order": [[4, "desc"]],
            destroy: true,
            retrieve: true,
            "ServerSide": true
        });
    });

Hi Team,
As I am new to this I would like to know some inputs regarding to Data Table export to excel/PDF functionality. Need to know about export table row span data value with cell merge into Excel and PDF.

Hi Team, I would like to know some inputs regarding to Data Table export to excel/PDF functionality. Need to know about export table column data value with specific cell merge (colspan in specific cell in a table) into Excel and PDF.

Above is the image of a server side responsive table, sorting is only done by clicking thead. But how to sort/order by in responsive view.

When I do a single row edit, it works, but when I do an auto fill, all it is sending is row id and changed data. I added in:

$j('#tProfit').on( 'click', 'tbody td:not(.readonly)', function (e)
        {
            //editor.inline( this );
            editor.inline( this, { submit: 'allIfChanged'} );
        }); 

and also tried

formOptions: {
        inline: {
            submit: 'allIfChanged'
        },
    },

I remember this working at one point in the past, not sure what I broke or why it stopped working.

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

Hi I'm trying to use datatables server side, in my localhot works perfectly but on my production server shows me an error "parseerror", taking a look to my code it looks like perfect just like datatables documentations says. but the php script is returning me a Syntax sql error, in my ORDER BY line is not printing the value of the $columns[$requestData['order'][0]['column']] and that's the error I tried to print only the variable and works fine, but in the sql string print the next...

You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1 - SELECT t_stock_necesario.id 'ID', t_stock_necesario.id_destino 'IDDESTINO', t_stock_necesario.fase 'FASE', t_stock_necesario.cod2bend 'COD2BEND', t_stock_necesario.descripcion2bend 'DESC2BEND', t_stock_necesario.naturaleza 'NATURALEZA', t_stock_necesario.id_seccion 'IDSECCION', t_stock_necesario.familia 'FAMILIA', t_stock_necesario.subfamilia 'SUBFAMILIA', t_stock_necesario.descripcion_nueva 'DESCNUEVA', t_stock_necesario.marca 'MARCA', t_stock_necesario.modelo 'MODELO', t_stock_necesario.caracteristicas_principales 'CARACTPPALES', t_stock_necesario.stock_necesario 'STOCKNEC', t_stock_necesario.num_existencias_2bend 'EXIS2BEND', t_stock_necesario.num_existencias_subalmacenes 'EXISSA', t_stock_necesario.precio 'PRECIO', t_stock_necesario.consumo_anual 'CONSUMOANUAL', c_destinos.destino 'DESTINO', c_secciones.seccion 'SECCION', c_subsecciones.grupo 'SUBSECCION' FROM t_stock_necesario INNER JOIN c_destinos ON t_stock_necesario.id_destino = c_destinos.id INNER JOIN c_secciones ON t_stock_necesario.id_seccion = c_secciones.id INNER JOIN c_subsecciones ON t_stock_necesario.familia = c_subsecciones.id WHERE t_stock_necesario.id_destino = 1 ORDER BY t_stock_necesario. here is the error it shoul be ORDER BY t_stock_necesario.id but not print the "id".

My code is the next.

<?php



$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 => 'id_destino',
    2 => 'fase',
    3 => 'cod2bend',
    4 => 'descripcion2bend',
    5 => 'naturaleza',
    6 => 'id_seccion',
    7 => 'familia',
    8 => 'subfamilia',
    9 => 'descripcion_nueva',
    10 => 'marca',
    11 => 'modelo',
    12 => 'caracteristicas_principales',
    13 => 'stock_necesario',
    14 => 'num_existencias_2bend',
    15 => 'num_existencias_subalmacenes',
    16 => 'precio',
    17 => 'consumo_anual'
);

// getting total number records without any search
$sql = "SELECT id ";
$sql .= "FROM t_stock_necesario";
$query = mysqli_query($conn, $sql) or die(mysqli_error($conn) . " - " . $sql);
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;  // when there is no search parameter then total number rows = total number filtered rows.


$sql = "SELECT t_stock_necesario.id 'ID', "
        . "t_stock_necesario.id_destino 'IDDESTINO', "
        . "t_stock_necesario.fase 'FASE', "
        . "t_stock_necesario.cod2bend 'COD2BEND', "
        . "t_stock_necesario.descripcion2bend 'DESC2BEND', "
        . "t_stock_necesario.naturaleza 'NATURALEZA', "
        . "t_stock_necesario.id_seccion 'IDSECCION', "
        . "t_stock_necesario.familia 'FAMILIA', "
        . "t_stock_necesario.subfamilia 'SUBFAMILIA', "
        . "t_stock_necesario.descripcion_nueva 'DESCNUEVA', "
        . "t_stock_necesario.marca 'MARCA', "
        . "t_stock_necesario.modelo 'MODELO', "
        . "t_stock_necesario.caracteristicas_principales 'CARACTPPALES', "
        . "t_stock_necesario.stock_necesario 'STOCKNEC', "
        . "t_stock_necesario.num_existencias_2bend 'EXIS2BEND', "
        . "t_stock_necesario.num_existencias_subalmacenes 'EXISSA', "
        . "t_stock_necesario.precio 'PRECIO', "
        . "t_stock_necesario.consumo_anual 'CONSUMOANUAL', "
        . "c_destinos.destino 'DESTINO', "
        . "c_secciones.seccion 'SECCION', "
        . "c_subsecciones.grupo 'SUBSECCION' "
        . "FROM t_stock_necesario "
        . "INNER JOIN c_destinos ON t_stock_necesario.id_destino = c_destinos.id "
        . "INNER JOIN c_secciones ON t_stock_necesario.id_seccion = c_secciones.id "
        . "INNER JOIN c_subsecciones ON t_stock_necesario.familia = c_subsecciones.id "
        . "WHERE t_stock_necesario.id_destino = 1 ";

if (!empty($requestData['search']['value'])) {   // if there is a search parameter, $requestData['search']['value'] contains search parameter
    $sql .= " AND ( t_stock_necesario.id LIKE '" . $requestData['search']['value'] . "%' ";
    $sql .= " OR t_stock_necesario.descripcion2bend LIKE '" . $requestData['search']['value'] . "%' ";

    $sql .= " OR t_stock_necesario.descripcion_nueva LIKE '" . $requestData['search']['value'] . "%' )";
}

$query = mysqli_query($conn, $sql) or die(mysqli_error($conn) . " - " . $sql);

$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 t_stock_necesario." . $columns[$requestData['order'][0]['column']] . "   " . $requestData['order'][0]['dir'] . "";

print_r($columns);

//$requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc  */
$query = mysqli_query($conn, $sql) or die(mysqli_error($conn) . " - " . $sql);

$data = array();
while ($row = mysqli_fetch_array($query)) {  // preparing an array
    $nestedData = array();

    $nestedData[] = $row["ID"];
    $nestedData[] = $row["DESTINO"];
    $nestedData[] = $row["FASE"];
    $nestedData[] = $row["COD2BEND"];
    $nestedData[] = $row["DESC2BEND"];
    $nestedData[] = $row["NATURALEZA"];
    $nestedData[] = $row["SECCION"];
    $nestedData[] = $row["SUBSECCION"];
    $nestedData[] = $row["SUBFAMILIA"];
    $nestedData[] = $row["DESCNUEVA"];
    $nestedData[] = $row["MARCA"];
    $nestedData[] = $row["MODELO"];
    $nestedData[] = $row["CARACTPPALES"];
    $nestedData[] = $row["STOCKNEC"];
    $nestedData[] = $row["EXIS2BEND"];
    $nestedData[] = $row["EXISSA"];
    $nestedData[] = $row["PRECIO"];
    $nestedData[] = $row["CONSUMOANUAL"];

    $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
?>

thank you for all the help.

Regards

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

We're using DataTables and Editor with a custom AJAX back-end and we are confused about when and where we should do type conversions from the back-end to Editor forms and back.

Suppose that an AJAX response contains this value:

{
  "name": "Tiger Nixon",
  "salary": 320800
}

Is this a good columns config?

columns: [
  { data: "name" },
  { data: "salary", render: $.fn.dataTable.render.number(",", ".", 0, "$") }
]

Is this a good fields config?

fields: [
  {
    name: "name",
    label: "Name",
    type: "text"
  },
  {
    name: "salary",
    label: "Salary",
    type: "text",
    attr: {
      type: "number"
    }
  },
]

This renders two input fields in the form.

in pseudo markup:

<input type="text" name="name">
<input type="number" name="salary">

I get mentally stuck on the salary field. All salaries flowing from the back-end to the Editor form are numeric up until the point where they are rendered in the HTML.

<input type="number" name="salary" value="320800">

Any changes to the salary field are naturally submitted as string (since <input> values are always strings).

Now I have a few options where I can convert that value back to a number: inside a preSubmit handler or inside ajax (as a function) or inside a postSubmit handler. The choices are a little overwhelming.

Is there a good place where I can convert values from strings back to their expected type? Or should I use strings everywhere in DataTables/Editor and handle conversions in the data layer of my app?

As far as I can tell my table, #tableAllBrowseProperties, is not inheriting any defaults I've set in $.fn.dataTable.defaults

Snippets:

$.extend($.fn.dataTable.defaults, {
                dom: '<"datatable-scroll"t><"datatable-footer"ip>',
                language: {
                    paginate: {
                        'first': 'First',
                        'last': 'Last',
                        'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                        'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;',
                        'pagination': false,
                        'info': false,
                        'searching': false,
                        "lengthChange": false,
                        "columnDefs": [{
                            "targets": ["js-column-reports", "js-column-trade", "js-column-location"],
                            "searchable": false,
                            "orderable": false,
                }],
                        "pageLength": 5
                    }
                },
                //responsive: true


            });

(Some options here aren't relevant to this particular table)

var x = $('#tableAllBrowseProperties').DataTable({
                    colReorder: true,
                    dom: 'Bfrtip',
                    buttons: {
                        buttons: [
                            {
                                extend: 'colvisGroup',
                                text: 'Show my investments',
                                show: [9, 10, 11, 12, 13]
            },
                            {
                                extend: 'colvisGroup',
                                text: 'Hide my investments',
                                hide: [9, 10, 11, 12, 13]
            }
            ],
                        dom: {
                            button: {
                                tag: "button",
                                className: "btn bg-slate bg-slate mr-2"
                            },
                            buttonLiner: {
                                tag: null
                            }
                        }
                    },
                "searching": false
            });

                x.columns([9, 10, 11, 12, 13]).visible(false); x.on('column-visibility.dt', function (e) {
                    x.columns.adjust().draw();
                });

Link to page:

https://webdev.brandnetics.co.uk/cm/assetzexchange/Bootstrap%204/Template/layout_4/LTR/default/full/browse-properties-v2.html

Any help appreciated.

Good day!
Thank you for your plugin. I use it for a couple of years, and everything’s work great.

Today i installed the last version, and got a message in Chrome console:

A cookie associated with a cross-site resource at http://datatables.net/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

So, just want you to know, may be you can fix it in the future.
Thank you.

Trying to select only column '0' data from selected rows. This is what I've got so far but the output shows every row data and not just selected..

Any help would be massively appreciated.

$('.datatable').DataTable( {
    "dom": 'Bfrtip',
    "buttons": [
        {
            "extend": 'selected',
            "text": 'Send Invites',
            "action": function ( e, dt, node, config ) {
                var table = $('.datatable').DataTable();
                table.rows({selected:true}).map( function ( rowIdx, tableLoop, rowLoop ) {
                    var data = this.column(0).data();
                    new_data = data.join(',');
                    console.log(new_data);
                    //window.location.replace(new_data);
                });
            }
        },
    'selectAll',
    'selectNone'
    ],
    "select": 'multi',
    "paging": false,
    "bInfo" : false,
    "scrollX": false,
    "searching": true,
    "responsive": true,
    "order": [[0, 'asc']]
});

Thanks in advance!

Ben

Hi. I am trying to setup a checkbox on an editor 1.6.1 form. I am using the examples here https://editor.datatables.net/reference/field/checkbox as a guide but it appears an array keeps being passed giving me the Array to string error. I get the following error...

<b>Notice</b>:  Array to string conversion in <b>/var/www/cciu_cms/php/Database/Driver/Mysql/Query.php</b> on line <b>92</b><br />
{"data":[{"DT_RowId":"row_201900325",..."case_true":"Array",...

I am trying to pass an object and use a boolean. Here is my field definition...

fields: [ { ...
, {
        type: 'checkbox',
                label: 'True:',
                name: 'cases.case_true',
            options: [
                { label:'yes', value: 1 }
            ],
        seperator: '',
        unselectedValue: 0
            }

Test case
http://jsfiddle.net/cmv2hkj9/

stateLoadCallback changes the col order to swap the first and second column. The columns option excludes "Name" (the 1st column) but the 2nd col "Position" ends up being excluded from the colvis drop down as it is the 1st col after the reorder.