Hi,

I've seen similar questions related to populating field options (or dropdown input options) using an ajax data sources. I want to know whether its possible to populate the options using an array only(without labels and values/JSON), like below,

input array from ajax=[test1,test2,test3]

var options;
    function optionlist() {                  
            $.get("/itemlist",function(data) {                
                //console.log(data)
                options=data;
        }
        ).done(function() {
        editor.field('customer').update(options);   
       option=[]; 
        });
        }

So the values test1,test2,test3 will be the options

Thanks

Link to test case: http://live.datatables.net/bogaruti/3/
Debugger code (debug.datatables.net): Uploading... (doesnt finish)
Error messages shown: none
Description of problem: Input of column search gets lost while drawing the table. To reproduce search for d in first column and immediately press any key after. After the drawing is finished none of the typed letters will appear.

I need to find what some cookies with domain datatables.net are used for in my web app.

Where can I get a list? Web app is ASP.NET, HTML, BOOTSTRAP based.

Some of cookies: _utma, _utmb, _utmc, _utmt, _utmz, PHPSESSID ..

tnx

hello all
im using datatable for sometime and im pretty happy with it
only problem i have i use datatable Server-side processing
and for example i save date in mysql with timestamp not 2009/10/15
so when users use search in datatable its not work when they type 2009
and my php code is like this

        array(
            'db' => 'time_stamp',
            'dt' => 'time_stamp',
            'formatter' => function ( $d, $row ) {
                return date('Y/m/d G:i',$d);
                
            }
        )

there is anyway i can fix this? also there is way to do range search?

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I am using the Editor and when I make an edit to a cell, I see that searchpanes gets rebuilt and it takes a very long time. How and where do I specify to rebuild? I know we're asked to do searchPanes.rebuildPane, but it's not clear WHEN you're supposed to run this. So far, I tried it at the Editor 'postEdit' event, but that's not working.

Hi,
* running DT with serverside execution
* search panes with several categories/columns

• If I enable **statesave **
• & if there are at least two categories in search panes an Item is selected
• & if in of them more than on item selected (please refer attachment for clarity)

-> a refresh leads into a hanging and to infinitive server queries. Please see pictures in the thread attachment.

I can't offer a real test case with a SQL database and where the issue can be shown. I could offer a portable ready-2-go XAMPP package, if desired.

I made a test case with the relevant HTML & JS part:
http://live.datatables.net/hamiluro/1/edit
Every module/extension is the most current one/nightly.

In addition, i reverted all my customisations and made a setup from the scratch - I can reproduce the issue.
So I believe, it might be not only a local issue of mine.

Thanks in advance. Regards...

I have two functions inside of my datatables script. They are both using different ajax calls.

My table (name: product_data) and scripts are working as expected but I get this error message with the first page load:

"DataTables warning: table id=product_data - Cannot reinitialise DataTable"

I think this error comes because I have a mistake in mergin these two functions together in one script. Could you help me how to get these functions together?

$(document).ready(function() {

  // Start Function 1

  load_data();

  function load_data(is_category) {
    var dataTable = $('#product_data').DataTable({
      "processing": true,
      "serverSide": true,
      "sDom": "rtipl",
      "order": [],
      "ajax": {
        url: "fetch.php",
        type: "POST",
        data: {
          is_category: is_category
        }
      },
      "columnDefs": [{
        "targets": [2],
        "orderable": false,
      }, ],
    });
  }

  // Script for Function 1 //

  $(document).on('change', '#category', function() {
    var category = $(this).val();
    $('#product_data').DataTable().destroy();
    if (category != '') {
      load_data(category);
    } else {
      load_data();
    }
  });


  // Start Function 2

  fetch_data('no');

  function fetch_data(is_date_search, start_date = '', end_date = '') {
    var dataTable = $('#product_data').DataTable({
      "processing": true,
      "serverSide": true,
      "order": [],
      "ajax": {
        url: "fetch.php",
        type: "POST",
        data: {
          is_date_search: is_date_search,
          start_date: start_date,
          end_date: end_date
        }
      }
    });
  }

  // Script for Function 2 //

  $('#search').click(function() {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    if (start_date != '' && end_date != '') {
      $('#product_data').DataTable().destroy();
      fetch_data('yes', start_date, end_date);
    } else {
      alert("Both Date is Required");
    }

  });

  // Search Field

  var datatable = $('#product_data').DataTable();
  $('#searchfield').on('keyup', function() {
    datatable.search(this.value).draw();
  });

});

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

We're creating a custom context menu on right-clicks on our Editor screen fields. This is working correctly for all screen elements except for date fields. It seems that the datepicker's calendar popup is invoked on focus so it always fires no matter which mouse button is clicked. We'd like to suppress it on mouse right-clicks. Is there a (simple) way around this? This was tested on Chrome.

I am getting below error on the fn.dataTable.Editor
Cannot read property 'Editor' of undefined at HTMLDocument.<anonymous> (http://localhost:8080/js/dat

Below are my includes for script.

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="/css/editor.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="/js/dataTables.editor.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="/js/datatable.js"></script>

following is the case where an _excel download _won't work until all special characters like / $, apostrophe etc are removed.

http://live.datatables.net/liwupoba/1/edit

Debugger code (debug.datatables.net):

body: function (data, row, column, node) {
if ($(data).is("input"))
return $(data).val();
else if ($(data).is("select"))
return $(data).val();
else
return data;
}

Error messages shown:
spining wheel on the excel button forever until we refresh the page
Description of problem:
An export works just fine but if the data contains a special character I am not able to run my jquery commands to check if the cell has a input or select etc

There was a related discussion, waiting for resolution: https://datatables.net/forums/discussion/49448/export-options-does-not-support-the-special-characters

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hi, how can I send the code from example 1 in example 2 below. Thank you ..

EXAMPLE 1 = / * var toggler = document.getElementsByClassName ("caret"); var i; for (i = 0; i <toggler.length; i ++) {toggler [i] .addEventListener ("click", function () { this.parentElement.querySelector (". nested"). classList.toggle ("act"); this.classList.toggle ("caret-down");});} * /

EXAMPLE 2 = / * jQuery (function ($) (
var dataTable = $ ('# Page'). DataTable ((
"processing": true,
"serverSide": true,
"responsive": true,
'serverMethod': 'post',
"order": [],
"lengthMenu": [[-1, 10, 50, 100], ["All", 10, 50, 100]],
'language': {'url': 'KLasor / TR-en.json'},
"ajax": {url: "ServisData.php", type: "POST", dataType: "json"},
"columnDefs": [{"type": 'turkish', "targets": [0,2], "orderable": false,},],
});
}); * /

Is it possible to indicate in some manner that a search is taking place? If there was a "completed" callback on search, I could put up a "busy" indicator, and then clear it when it finishes.

This is generally not a big issue, but once I get 4500 rows (for example), my search takes 8-9 seconds, and it would be great to tell the user to be patient. The search I'm doing is that when a checkbox is changed, it will filter the current rows to ones where the "pref" column == 1. If not checked, it will show records with any numeric value in that column. Maybe there is a faster way to do this? I am not doing server side- maybe that is the answer, but I've not delved into that.

I see similar wait times when I click on a column to have it sort on that column. Maybe there is a way to have it automatically show a busy indicator on the cursor or something similar?

$("#prefcheck").change(function() {
    if($(this).is(":checked")) {
        addtable.columns(4).search(1).draw();
    }   else {
        addtable.columns(4).search("^[0-1]$", true).draw();
    }
});

Long story short:
RowReordering doesn't work. I can drag the row up&down (I can see how it moves in chrome dev console), but by drop it flies back to its starting position. I've googled, read official Docs, read few topics here and by stackoverflow. It seems that my code is correct. This forum is my last hope.

table.php

<?php
     ...some server-side actions to get DB data... 
$json_array = json_encode($data);
?>

<table id="draggable" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Nr.</th>
            <th>Topic</th>
            <th>Answers</th>
        </tr>
        </thead>
    </table>
</div>
<script>
$(document).ready(function () {
let data_arr = <?php echo $json_array;?>;
        let table = $('#draggable').DataTable({
            data: data_arr,
            "paging": false,
            "searching": false,
            "ordering": true,
            "autoWidth": false,
            "info": true,
            createdRow: function (row, data, dataIndex) {
                $(row).attr('id', 'row-' + dataIndex);
            },
            rowReorder: {
                dataSrc: "nr"
            },
            "columns": [
                {"data": 'nr'},
                {"data": 'topic'},
                {"data": 'answers'}
            ],
            "columnDefs": [
                {"className": "dots", "targets": [1]},
                {"className": "table-30", "targets": [2]}
            ],
            "order": [[0, 'asc']]
        }).rowReordering();
 </script>

index.php

here just to show the sequence of links (if they are right):

<link href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"> 
</script>

any ideas why rowreordering doesn't work?

P.S. the data type and structure I send to DataTable is object. Prepared Table looks like this:

Trying to get this email button to work but getting an error.

https://datatables.net/forums/discussion/21982/is-there-a-way-to-email-a-datatable

I'm new to all this and I'm guessing it's something to do with this

var pid = $("#elempid").val();

To what does that refer?

And where should I put that reference. The sendmail is triggering fine. My code is same except table reference.

Console output below.

 <table>
            <thead>
                <tr role=\"row\"><th class=\"sorting\" tabindex=\"0\" aria-controls=\"pexpenses\" rowspan=\"1\" colspan=\"1\" aria-label=\"Type: activate to sort column ascending\" style=\"width: 235px;\">Type</th><th class=\"sorting_asc\" tabindex=\"0\" aria-controls=\"pexpenses\" rowspan=\"1\" colspan=\"1\" aria-label=\"Description: activate to sort column ascending\" style=\"width: 425px;\" aria-sort=\"ascending\">Description</th><th class=\"sorting\" tabindex=\"0\" aria-controls=\"pexpenses\" rowspan=\"1\" colspan=\"1\" aria-label=\"Cost: activate to sort column ascending\" style=\"width: 152px;\">Cost</th><th class=\"sorting\" tabindex=\"0\" aria-controls=\"pexpenses\" rowspan=\"1\" colspan=\"1\" aria-label=\"Quantity: activate to sort column ascending\" style=\"width: 239px;\">Quantity</th><th class=\"sorting\" tabindex=\"0\" aria-controls=\"pexpenses\" rowspan=\"1\" colspan=\"1\" aria-label=\"Item Total: activate to sort column ascending\" style=\"width: 274px;\">Item Total</th></tr>
            <thead>

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

Hello guys, following this example https://datatables.net/examples/api/tabs_and_scrolling.html it makes two ajax calls at the same time, one for every tab, the problem is that mysql give me this error https://dev.mysql.com/doc/refman/8.0/en/commands-out-of-sync.html

two simultaneus mysql calls not allowed. Any simple idea front-end side to solve this?
I just need to call one time the ajax for both the tabs (same data)

I have setup column filters, but no matter what I do, I cannot get it to use the entire <th> available space.

You can see from the inspection, it has plenty of space available to the right of the input box.

And the styling for the input has width 100%.

I think it is the exact spacing of the sort for the column. But even if I disable the sort the space is still not used. Really would like to figure this out.

Thank you.

So I tried adding the Fixed Column with the first three columns, Column 0 is hidden.

The text is over lapping and not really working. see image below.

When I scroll right or left the Job column moves but it is out of alignment with the actual rows and it is overlapping the other columns as you scroll.

I have 4 dependent on my datatable, when I open Editor it works, but its never stopping, which makes it not able to save the information.

editor.dependent('ProdutoEdit', function () {
$.ajax({
url: "/PedidoVenda/GetProdutos/",
dataType: 'json',
success: function (retorno) {
editor.field('ProdutoEdit').update(retorno)
}
});
});

editor.dependent('CorEdit', function (val, data, callback) {        
    $.ajax({
        url: "/PedidoVenda/GetCores?Produto=" + data.values.ProdutoEdit,
        dataType: 'json',
        success: function (retorno) {
            editor.field('CorEdit').update(retorno)
        }
    });        
});

editor.dependent('TamanhoEdit', function (val, data, callback) {
    $.ajax({
        url: "/PedidoVenda/GetTamanhos?Produto=" + data.values.ProdutoEdit,
        dataType: 'json',
        success: function (retorno) {
            editor.field('TamanhoEdit').update(retorno)
        }
    });
});

editor.dependent('ValorUnEdit', function (val, data, callback) {
    var Url = "/PedidoVenda/GetPreco?Produto=" + data.values.ProdutoEdit + "&Cor=" + data.values.CorEdit + "&Tamanho=" + data.values.TamanhoEdit;
    $.ajax({
        url: Url,
        dataType: 'json',
        success: function (retorno) {
            editor.field('ValorUnEdit').val(retorno);
        }
    });
});

All of them have a valid return and it shows on Editor, but it keeps on looping

When I click on "ADD" it loads the field (which will take more things in considerate in the future) but keeps on "loading" so I can't save row.

Error: http://live.datatables.net/guwafemu/130/edit

I am using the RowGroup extension and it works quite well (thanks for this!). I am trying to implement a collapse expand feature that I found, and the problem I am having is getting the jquery selector for the group to trigger.

When I use the inspector in Chrome on a group row, I see something like this:

<tr data-name="01 74 10" class="dtrg-group dtrg-start dtrg-level-0">
    <td colspan="8">01 74 10 (54)</td>
</tr>

Here is one selector I have tried, that seems like it should work:

$("tr.dtrg-group td").click( function () {
    alert("click");
}); 

The way my app works is:
- the table starts out with no data
- user clicks a btn which opens a modal dialog with a multiselect list of csi codes (categories of work)
- when user selects a code, I do an ajax call to get records with that code
- I loop through this list and call add rows with row.add

It uses bootstrap. Thinking that might be interfering, I have commented it out, with no change.

So- what could cause my jquery selector to fail?

What is particularly annoying is that there is a working example, and the code is essentially like mine, but simpler. I've always felt that if I have a working example and a non-working example, I should be able to spot the difference, but so far it has eluded me.
Simple working example I found

Here is my datatables declaration:

var addtable = $('#contaddedtable').DataTable(
{
    "dom": 'Bfrtip',
    "processing": true,

    drawCallback: function( settings ) {
      $.busyLoadFull("hide");
    },

    "columnDefs": 
    [{
        targets: 0,
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox'
    }   
    ,{
        "targets": [1,2],
        "createdCell": function (td, cellData, rowData, row, col)
        {
            if ( rowData.inUse == 1 )
            {
                $(td).addClass('inUse');
            }
        }
    }]

    ,rowGroup: {
        dataSrc: ['CSI']
    ,startRender: function (rows, group) {
      var collapsed = !!collapsedGroups[group];

      rows.nodes().each(function (r) {
          r.style.display = collapsed ? 'none' : '';
      });    

      // Add category name to the <tr>. NOTE: Hardcoded colspan
      var csiString = csiAssocArr[group];
      return $('<tr/>')
          .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
    }
    }
    ,"columns": 
    [
        {
            render: function(data, type, row){
                return("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            }
        }
        ,{ "data": "inUse", "visible": false}
        ,{ "data": "Company",
            render: function(data, type, row){

                var prefClass = "";
                switch (row.Pref)
                {
                    case "1":
                        prefClass = "preferred_cont";
                        break;
                    case "2":
                        prefClass = "caution_cont";
                        break;
                    case "3":
                        prefClass = "donotuse_cont";
                        break;
                }

                return( "<span class='edit_cont " + prefClass + "' contId='" + row.ID + "'>" + data + "</span>");

            } 
        }
        ,{ "data": "CSI" }
        ,{ "data": "Pref" }
        ,{ "data": "NumInvits"} 
        ,{ "data": "Accepted",   "visible": true }
        ,{ "data": "AcceptPct" }
        ,{ "data": "DeclinePct" }
        ,{ "data": "ProposalPct" }  
        ,{ "data": "ViewedPct" }            
        ,{ "data": "AwardPct" } 
        ,{ "data": "NoRespPct" }
        ,{ "data": "NumAwards"}
        ,{ "data": "locations"}
        ,{ "data": "flags", "visible":      false}
        ,{ "data": "ID", "visible":         false}
        ,{ "data": "MD" , "visible":        false, className: "details" }
        ,{ "data": "Balt" , "visible":  false, className: "details" }
        ,{ "data": "DC" , "visible":        false, className: "details" }
        ,{ "data": "NVa" , "visible":   false, className: "details" }
        ,{ "data": "VA" , "visible":        false, className: "details" }
        ,{ "data": "DE" , "visible":        false, className: "details" }
        ,{ "data": "WV" , "visible":        false, className: "details" }
        ,{ "data": "PA" , "visible":        false, className: "details" }
        ,{ "data": "MS" , "visible":        false, className: "details" }
        ,{ "data": "Un" , "visible":        false, className: "details" }
    ]
    ,paging: false
    ,"scrollY": "500px"
    ,"scrollX":true
    ,select: {
    'style': 'multi',
    selector: 'td:first-child'
    }
    ,dom: 'Bfrtip'
    ,buttons: [
        'selectAll',
        'selectNone',
        {
            text: "Add Selected to Project",
            action: function(){
                    var selRows = addtable.rows( { selected: true } ).data();
                    var selIds = [];
                    for (var i = 0; i < selRows.length; i++)
                    {
                        selIds.push(selRows[i].ID);
                    }

                    $.ajax({        
                        type: "POST",
                        url: "scripts/addContsToProj_TEST.php",
                        data: {"projectId": projid, "selections": selIds},
                        success: function(addedIds) {
                                $('#catselect').change();
                        }
                    });
                }
        }
    ]

    ,"language": {
        search: 'Filter Displayed Contractors:',
        searchPlaceholder: 'search all fields'
    }
});