Hello All,

I am very new to DataTables and Editor, and I am trying to find any details I can on how to perform a specific task.

I am wanting to change the background colour of certain cells within my table, based on the data that is in that cell. This is both before or after an edit, and on multiple pages of data.

I am using the .NET libraries within MVC,

I want to do something like the below (code is for example and is not intended to be correct!)

$('#tablename').on("change", function () {
            if ($('#tablename').cellvalue.startsWith("P")) {
                $('#tablename').addClass('pass');
            }
        });

Can anyone tell me the correct way to achieve this please? I only want this condition to be checked on certain cells, not all cells within the table.

Many thanks.

Hi,

I use selectize.js and the following code

$(document).ready(function() {
  editor = new $.fn.dataTable.Editor( {
    ajax: '/online-erfassung/edit-table.php',
    table: '#kledit',
    fields: [
      { label: '1. Verfasser',
        name:  '_100_1_a',
        options: [],
        type: 'selectize',

        opts: {
          valueField: 'NAMEN',
          labelField: 'NAMEN',
          searchField: 'NAMEN',
          sortField: 'NAMEN',  // Sorting does not work ??
          create: true,
          load: function( query, callback ) {
                  if ( query.length <= 1 ){ return callback()};
                  $.ajax({
                    url: "/cgi-bin/online-erfassung/2014/select-data.pl",
                    type: 'GET',
                    dataType: 'json',
                    data: { start: query,  col: "NAMEN", table: "PERSONENNAMEN", endtrunkierung: "1" },
                    error: function() { callback(); },
                    success: function(res) { callback(res); },
                    // success: function(res) { alert( "Press Enter" ); callback(res); },
                    create: function (input){ return {name: _100_1_a, text: input }}
                  });
                }
        }


      { label: more labels ... }

    }
    formOptions: {
      main: {
        onReturn: false,
        onBlur: "submit"
      }
    }
    more code ...
  });
});

my problem is that the select list returned is not sorted even though the JSON response from the server is sorted alphabetically. An excerpt of the JSON data is for example:

[{"NAMEN":"Grasso, Elsa"},{"NAMEN":"Grasso, Giuseppe"},{"NAMEN":"Grasso, Luciana"},{"NAMEN":"Grasso, Maurizio"},{"NAMEN":"Grasso, Paolo"}]

Alas, when I activate the commented line 26 containing "Press Enter", and deactivate the previous line 25, the select list will be sorted. Besides the fact that I con't understand why, I generally would prefer a sorted select list since a sorted list is better understandable by the user.

Is there any possibility to get a sorted list without the otherwise unnecessary alert command?

Thanks,
Eberhard
~
~

Allen,

I am trying to provide a table which behaves somewhat like excel, in that if you edit a cell, other cells will update based on a formula. I implemented a php function which recalculates and updates all table elements which were impacted by the POST data

I then need to have this RUN as a post edit event. This failed, so I thought I could do an ajax.reload using a drawCallback, but I cannot get that to function either

I seem to be wrestling with 2 issues:

1

        var affordTable;
    $(document).ready(function() {
        var affordTable = $("#affordTable").DataTable( {
                        dom: "Bt",
            "drawCallback": function( settings ) {
                affordTable.ajax.reload();
            },
                       ......

results in: TypeError affordTable is undefined
What am i doing wrong?

In the server side
```
->on( 'postEdit', function ( $editor, $id, $values )
{
updateSubtotals();
})

Which calls php function to calculate and update subtotal columns in a mysql table, causes a
Lock wait timeout exceeded error in mysql (the query executes just fine from phpMyAdmin)

Any idea why this occurs?

Is it possible to put a select Box beside the search field?
If yes, how can I do this?

Andreas

I'm trying to port an existing web app into DataTables/Editor. Any record in the table being edited might have zero to many related records in another table. Is there any way from within an Editor form to invoke the editor again on the related table record in the related table? I'd like to be able to create a record in the related table when necessary, as well as to display the related records in that table. So far, I haven't found a way to do this within the DataTables/Editor framework.

Since this is a feasibility question, I don't have a problem pagers debug or link to. However, I can provide more detailed information if that would help someone who wants to respond.

https://datatables.net/reference/event/responsive-display

I'm having a issue where the ajax reload function is causing the datatables responsive plugin to close the open row details.
table.ajax.reload( null, false );

I'm aware of a workaround for select2 fields by listening for the ajax request (below) and I am confident I'll have to use this approach with this issue.
table.on('xhr.select2Fix', function(){

My question is can I trigger the responsive plugin to open a row ID manually (for my problem here I can simply record the rowID on this event)
table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {

or do I only have the option of using the button beside the row to toggle the expansion/retraction of the responsive display?

`$username = $_POST['username_reg'];
$password_reg=$_POST['password_reg'];
$password = md5($password_reg);
$user_reg_date = date("Y-m-d", time());

    $user_insert= $db->prepare("INSERT INTO users (username,password_tr,password,user_reg_date) VALUES (?,?,?,?)");
    $insert = $user_insert->execute(array($username,$password_tr,$password,$user_reg_date));
    $err = $user_insert->errorInfo();
    if (empty($err[2])) {
        echo 1;
    } else {

        echo "Error!";
    }`

How to update 2 columns with single post at the same time?

I'm trying to get DataTables editor set up with PHP 5.5.38 and MSSQL server.

I am getting an error saying it can't find the proper driver, but I have sqlsrv enabled (Both in screenshots below)

I am able to use the PDO object in other places without a problem. Any ideas?

Hello,
Unfortunately, i have tried every single possibility of solution for this problem, including the one described in a discussion in this forum.
The problem is the fact that the sorting icon on my datable doesn't appear. Another problem/inconvenient is the type of icon. Basically are two types, the most standard one and the most awesome, and i want to use the last one mentioned.

I really tried everything. Import of .js and .css, definitions in the php page.

I don't know what to do now.

Thank you,
Best regards,
msvf.

I am trying to display an icon and associated data in a datatable editor. To achieve this i am trying to create a custom plugin ( though am not entirely sure this is the correct way to go about this )

I am struggling to understand how to get the actual editor value in order dynamically render the correct icon and text

On line 34 /* how do i get the value of the data to display */ --> what do i need to do in order to display the text of the data.

I want the editor to say [State] {icon} TheUserState, where TheUserState is and integer and the real text is stored elsewhere in the datatable field.

Please note that my editor form is readonly i just want to be able to display the icon and text associated with a data value (1,2,3)

I would really appreciate some help on this one.

Thanks in advance

Image of what i am trying to achieve

/*** My plugin ***/
 (function ($, DataTable) {

            if (!DataTable.ext.editorFields) {
                DataTable.ext.editorFields = {};
            }

            var Editor = DataTable.Editor;
            var _fieldTypes = DataTable.ext.editorFields;

/** looking to acheive this kind of thing inside the plugin to display icon and text depending on data
   if (data == 1)
       return '<span class="rowcolordatatable gray"><i class="icon-pen"></i> <span>' + row.Status + '</span></span>';
    if (data == 2)
       return '<span class="rowcolordatatable green"><i class="icon-check-mark"></i> <span>' + row.Status + '</span></span>';
    if (data == 3)
        return '<span class="rowcolordatatable red"><i class="icon-cross"></i> <span>' + row.Status + '</span></span>';
    **/

            _fieldTypes.RowStatus = {
                create: function (conf) {
                    var that = this;

                    var iconInfo = [{ colour: "grey", icon: "icon-pen" },
                                     { colour: "green", icon: "icon-check-mark" },
                                     { colour: "red", icon: "icon-cross" }];

                    var _iconInfo = iconInfo[0]; // i need the value of the row_status  (id) in here

                    // Create the elements to use for the input
                    conf._input = $(

                        '<div class="rowcolordatatable ' + _iconInfo.colour + '"><i class="' + _iconInfo.icon + '"></i><div>' +
                          + /* how do i get the value of the data to display */ +
                         '</div></div>');

                    return conf._input;
                }
            };

        })(jQuery, jQuery.fn.dataTable);

editor = new $.fn.dataTable.Editor({
                "idSrc": "Id",
                "table": "#SearchResultTable",
                "fields":
                [
                    {
                        label: "Status:",
                        name: "Status",
                        type: "RowStatus" /* custom plugin to show icon and status */
                    },
                ]
            });

 var table = $('#SearchResultTable').DataTable({
                "proccessing": true,
                "serverSide": true,
                "columns": [
                  {
                      "data": "RegistrationStatusId", render: function (data, type, row) {
                          if (data == 1) {
                              return '<span class="rowcolordatatable gray"><i class="icon-pen"></i> <span>' + row.Status + '</span></span>';
                          }
                          if (data == 2) {
                              return '<span class="rowcolordatatable green"><i class="icon-check-mark"></i> <span>' + row.Status + '</span></span>';
                          }
                          if (data == 3) {
                              return '<span class="rowcolordatatable red"><i class="icon-cross"></i> <span>' + row.Status + '</span></span>';
                          }
                          return data;
                      }
                  },
                ]
            });

Hi There, i would like to get dynamical data displayed on a Jquery Dialog. I want that to be triggered when i click on datatable row. Can someone please give an example on how to on this.

Hi All

I have a DT inside a DIV and i want the DIV to be refreshed. Why?
When i click on the DT row, i retrieve dynamical data from the DB and and display on a modal. My Issue is that the query is only done once, If i click on a diferent row, it cashes the data of the previous query, so it doesnt update the values unless i refresh the page. I tried doing a table.reload.ajax() however even after reloading the DT, i still get the same behaviour where it does not query the DB with diferent ID. So the solution is to have some sort of refresh done by jquery however i dont want to refresh the whole page, only the DIV containing the DT.
Can someone point me to a solution on that?

I have a column in one table that renders an anchor tag. I have an on click event on that anchor tag. When clicked it will pass some query parameters to a Url and then open a new page in a different window based on those parameters. The problem I have is that the parameter that comes from the datatable throws an error saying that that parameter is undefined.
I have a different table where I do almost the same thing. The difference is that the other table doesn't open another window, it just navigates to a different page. The code on this table works. I don't know why it doesn't work on the other one.

This works. The on click event successfully retrieves the id from the anchor tag:

var oTable = $("#mntncTable").DataTable({
                ajax: {
                    url: urlLM,
                    type: "GET",
                    datatype: "json"
                },
                order: [[0, "asc"]],
                stateSave: true,
                displayLength: -1,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                    { data: "CompanyName" },
                    { data: "BudgetItem" },
                    { data: "Supplier" },
                    { data: "AccountNumber" },
                    { data: "OriginalPurchDate" },
                    { data: "ExpirationDate" },
                    { data: "ComputerName" },
                    { data: "LicenseName" },
                    {
                        data: "Id", width: "20px", sortable: false, render: function (data) {
                            return '<a class="editBtn" data-toggle="modal" href="#modalForm" data-id="' + data + '"><span class="mbri-edit"></span></a>';
                        }
                    }
                ]
            })

$('#mntncTable tbody').on('click', 'a.editBtn', function (eve) {
                var myId = $(this).data("id");
                var url = '@Url.Action("Edit", "MaintenanceDatas")';
                $("#form-content").load(url + "/" + myId);

            });

This doesn't. The quoteNum variable in the on click event is undefined.

var oTable = $("#quotesTable").DataTable({
                ajax: {
                    url: urlLM,
                    type: "GET",
                    datatype: "json"
                },
                order: [[0, "asc"]],
                stateSave: true,
                displayLength: -1,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                    { data: "QuoteNum", autoWidth: true },
                    { data: "QuoteLine", autoWidth: true },
                    { data: "PartNumber", autoWidth: true },
                    { data: "LineDesc", autoWidth: true },
                    { data: "LastUpdate", autoWidth: true },
                    { data: "LastDcdUser", autoWidth: true },
                    { data: "OrderQty", autoWidth: true },
                    { data: "ChangedBy", autoWidth: true },
                    { data: "ChangedDate", autoWidth: true },
                    {
                        data: "QuoteNum", width: "20px", sortable: false, render: function (data) {
                            return '<a class="startQuote" data-quoteNum="' + data + '"><i class="fa fa-hand-o-right" aria-hidden="true"></i></a>';
                        }
                    }
                ]
            })

            $('#quotesTable tbody').on('click', 'a.startQuote', function () {
                var quoteNum = $(this).data("quoteNum");
                var url = "Quote/StartQuote?quoteNum=" + quoteNum + "&editQuote=false";
                window.open(url);
            });

I don't know why it doesn't work.
Thanks in advance for your help.

Hello!

I'm using the html5export button to export my datatable data which is supplied via dom to and xslx. This works great except when I open the excel document and try to format the column which contains my dates it does not work. This seems to be because excel thinks the column is a string.

However, when I double click on a cell in the column in excel, the date string goes from left aligned to right aligned (which is why I think excel thinks this column is a string format) and then when I try to format that cell with a date format, everything works fine.

Is there a way to explicitly tell datatables, when exporting data, make sure this column is formatted as a date in the xlsx document?

Thanks!

Hi all,

is possible to set in this datepicker weeks starts on Monday?

Here is a fiddle to explain this.

He second column (date) is a range date and when you try to select start date in the filter the weeks always start on Sunday.

Thanks in advance.

Hi, Is there a way to add a ranking column to a html table of numbers? I'm trying to replicate a table that was created in Excel using Excel's Rank() function. Anyone know if this can be done using DataTables? I already have the numbers in html page. See two attachments.

I have seen it written that to disable the jQuery anti cache parameter, you should set ajax.cache = true. Is this a configuration parameter for the table or something global? Can someone give a code example?

When developing a multi-database solution, Editor seems to be ambivalent with NULL.
This conversation mentions that as of 1.7, Editor treats NULL as an empty string: https://datatables.net//forums/discussion/comment/9706/#Comment_9706

Empty strings don't really work for many situations. Take for example the nullable integer field, "FavoriteNumber".

• User opens an edit form with "FavoriteNumber" and 50 other fields. "FavoriteNumber" and other null (and empty but not null) values are shown as an empty string.
• User changes some fields but does not modify "FavoriteNumber".
• When user submits, Oracle interprets the empty string as NULL and writes a NULL. This non-standard and quirky behavior is actually useful in this one case.
• When user submits to Microsoft SQL, the empty string is interpreted as 0 (zero), so the user has changed the value of the field even though they did not intend to.
  This to me is not ideal, and I can't really find an easy way to deal with it. For example, if I set fields.defto null, an empty string still appears to be sent.

I think Editor should handle NULLs, which are absolutely a reality of database interaction.
This begs the question, "How can Editor handle NULLs?!"
Some ways that come to mind include:

1. For nullable fields (specified in Editor init or something), generate a checkbox for NULL. I kind of dislike this.
2. def:null sets the value to null instead of an empty string (or maybe def:undefined or similar)
3. Interpret some probably user-specified sentinel value as NULL, for example, "(null)", and set the field to this value when the incoming JSON for that entry is null.

I am sure it's more complex than this, for example, how can null be specified in HTML or over an HTTP POST or GET.
Perhaps an internal sentinal value of Ø, which is HTML Ø or URL-encoded as %C3%98 (not to be confused with ø, ∅, or ⌀ ...Ah, Unicode).

Any thoughts on how to handle NULLs, anyone?

Hello all

We're trying to get the most recent record from each group of widgets. Is there a way in 1.6.1 to natively do a group by in our table query?

Hi Guys,
I have done implementation for datatables in php successfully,I was trying the same in asp and I am an experiencing an error and has dragged me quiet abit.see below my json output:

JS
var table = $("#tblFindPatient").dataTable({
bAutoWidth: false,
bDestroy: true,
bJQuieryUI: true,
"aaSorting": [],
bProcessing: true,
bServerSide: true,/*
"aocolumns": [
{ "mData": "EnrollmentNumber"},
{ "mData": "PatientIndex" },
{ "mData": "FirstName" },
{ "mData": "MiddleName" },
{ "mData": "LastName" },
{ "mData": "DateOfBirth" },
{ "mData": "Sex" },
{ "mData": "RegistrationDate" },
{ "mData": "PatientStatus" }
],*/
"aoColumns": [
{"sName": "EnrollmentNumber", "sTitle": "Enrollment Number" },
{ "sName": "PatientIndex", "sTitle": "Patient Index" },
{ "sName": "FirstName", "sTitle": "First Name" },
{ "sName": "MiddleName", "sTitle": "Middle Name" },
{ "sName": "LastName", "sTitle": "Last Name" },
{ "sName": "DateOfBirth", "sTitle": "Date of Birth" },
{ "sName": "Sex", "sTitle": "Gender" },
{ "sName": "RegistrationDate", "sTitle": "Registration Date" },
{ "sName": "PatientStatus", "sTitle": "Patient Status" }

                    //this name should exist in your JSON response
                    //"render": function ( data, type, full, meta ) {
                    //    return '<span class="label label-danger">'+data+'</span>';
                    //}
                ],

                "sAjaxSource": "../WebService/PatientLookupService.asmx/FindPatient",
                "fnServerData":function(sSource, aoData, fnCallback, oSettings) {
                    aoData.push({ "name": "patientId", "value": ""+$("#<%=PatientNumber.ClientID%>").val()+"" });
                    aoData.push({ "name": "firstName", "value": ""+$("#<%=FirstName.ClientID%>").val()+"" });
                    aoData.push({ "name": "middleName", "value": ""+$("#<%=MiddleName.ClientID%>").val()+"" });
                    aoData.push({ "name": "lastName", "value": ""+$("#<%=LastName.ClientID%>").val()+"" });
                    aoData.push({ "name": "DateOfBirth", "value": "" + moment($("#SearchDoB").datepicker('getDate')).format('DD-MMM-YYYY') + "" });
                    aoData.push({ "name": "gender", "value": ""+$("#<%=Sex.ClientID%>").find(":selected").text()+"" });
                    aoData.push({ "name": "facility", "value": ""+$("#<%=Facility.ClientID%>").find(":selected").text()+"" });
                    aoData.push({ "name": "registrationDate", "value": ""+moment($("#RegDate").datepicker('getDate')).format('DD-MMM-YYYY') +"" });
                    oSettings.jqXHR = $.ajax({
                        "dataType": 'json',
                        "type": 'POST',
                        "contentType": 'application/json; charset=utf-8',
                        "url": sSource,
                        "data": JSON.stringify({ dataPayLoad: aoData }),
                        "success": function (response) { var json = response.d;
                            fnCallback(json) },
                        "error":function (xhr,errorType,exception) {
                            var jsonError = jQuery.parseJSON(xhr.responseText);
                            toastr.error("" + xhr.status + "" + jsonError.Message+" "+jsonError.StackTrace+" "+jsonError.ExceptionType, "Patient Finder Method");
                            return false;
                        }
                    });
                },
                sAjaxDataProp: "",
                "responsive":true,
                "bPaginate": true,
                "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
            });

{"d":"{\"draw\":1,\"recordsTotal\":1,\"recordsFiltered\":1,\"aaData\":[[\"2\",\"1065-2017\",\"MvhZninO7Fs=\",\"MvhZninO7Fs=\",\"28by3aG1iNw=\",\"2/2/2017\",\"62\",\"2/7/2017\",\"False\"]]}"}

Error
Datatables warning:table id=tbFindPatient - Request unknown parameter '1' for row '0',column 1.

any help ??