I have a requirement to use POST method using Ajax to invoke my .NET WCF JSON Service but when i tried, encountered an error,

Below is my code,

        $('#CaseInformationGrid').dataTable({
            "processing": true, // control the processing indicator.
            "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
            "info": true,   // control table information display field
            "stateSave": true,  //restore table state on page reload,
            ajax: {
                "url": "http://localhost:61358/RetrieveCase.svc/CaseInformation",
                "type": "POST",
                "data": {
                    "User_Id": "Kannan"
                }
            },

Please help me out.

Kannan

Hello everyone,
I have been struggling for days over an old (2011) piece of C# code I extracted from a DLL my boss wants me to edit.

The application queries a database with LINQ, server-side processes it and displays the data with a DataTable.
From what I gathered, the guy who wrote it had created an ASP.NET Web Forms Site in Visual Studio 2010, with .NET Framework 4.0.

He used the server-side parser from Zack Owens.
In the project I recreated in VS 2017, everything builds well, but at runtime, a bug comes from the little customizations he made to the DataTable parser: among them, the SelectProperties() function has been completely rewritten from this:

    private Expression<Func<T, List<string>>> SelectProperties
    {
        get
        {
            return value => _properties.Select
            (
                // empty string is the default property value
                prop => (prop.GetValue(value, new object[0]) ?? string.Empty).ToString()
            )
            .ToList();
        }
    }

to this:

    private Expression<Func<T, List<string>>> SelectProperties
    {
        get
        {
            var parameterExpression = Expression.Parameter(typeof(T), "value");

           // (Edited) The bug happens there: type_RD is null because GetMethod is not valid
            var type_RD = typeof(Enumerable).GetMethod(
                "ToList",
                new Type[] {
                    typeof(IEnumerable<string>)
                }
            );

            // The program crashes there (System.Null.Exception)
            var methodFromHandle = (MethodInfo)MethodBase.GetMethodFromHandle(
                type_RD
            .MethodHandle);

            var expressionArray = new Expression[1];

            var methodInfo = (MethodInfo)MethodBase.GetMethodFromHandle(
                typeof(Enumerable).GetMethod("Select", new Type[] {
                    typeof(IEnumerable<PropertyInfo>),
                    typeof(Func<PropertyInfo, string>)
                })
            .MethodHandle);

            var expressionArray1 = new Expression[] {
                Expression.Field(
                    Expression.Constant(
                        this,
                        typeof(DataTableParser<T>)
                    ),
                    FieldInfo.GetFieldFromHandle(
                        typeof(DataTableParser<T>).GetField("_properties").FieldHandle,
                        typeof(DataTableParser<T>).TypeHandle
                    )
                ), null
            };

            var parameterExpression1 = Expression.Parameter(
                typeof(PropertyInfo),
                "prop"
            );

            var methodFromHandle1 = (MethodInfo)MethodBase.GetMethodFromHandle(
                typeof(PropertyInfo).GetMethod(
                    "GetValue",
                    new Type[] {
                        typeof(object),
                        typeof(object[])
                    }
                )
            .MethodHandle);

            var expressionArray2 = new Expression[] {
                Expression.Convert(
                    parameterExpression,
                    typeof(object)
                ),
                Expression.NewArrayInit(
                    typeof(object),
                    new Expression[0]
                )
            };

            var methodCallExpression = Expression.Call(
                Expression.Coalesce(
                    Expression.Call(
                        parameterExpression1,
                        methodFromHandle1,
                        expressionArray2
                    ),
                    Expression.Field(
                        null,
                        FieldInfo.GetFieldFromHandle(
                            typeof(string).GetField("Empty").FieldHandle
                        )
                    )
                ),
                (MethodInfo)MethodBase.GetMethodFromHandle(
                    typeof(object).GetMethod("ToString").MethodHandle
                ),
                new Expression[0]
            );

            expressionArray1[1] = Expression.Lambda<Func<PropertyInfo, string>>(
                methodCallExpression,
                parameterExpression1
            );
            expressionArray[0] = Expression.Call(
                null,
                methodInfo,
                expressionArray1
            );

            // Return Lambda
            return Expression.Lambda<Func<T, List<string>>>(
                Expression.Call(
                    null,
                    methodFromHandle,
                    expressionArray
                ),
                parameterExpression
            );
        }
    }

My questions:

• How to make the SelectProperties function work?
• What exactly is its purpose? I didn't get any of the "MethodHandle" bits ...

The only hint I have is that, when I use the original SelectProperties code, the data are in the wrong columns and the sorting causes errors 500 with some of the columns.
Here is the other customized function of this custom DataTable.cs parser:

        public FormatedList<T> Parse()
        {
        var list = new FormatedList();
        list.Import(_properties.Select(x => x.Name).ToArray());

        list.sEcho = int.Parse(_httpRequest[ECHO]);

        list.iTotalRecords = _queriable.Count();

        ApplySort();

        int skip = 0, take = 10;
        int.TryParse(_httpRequest[DISPLAY_START], out skip);
        int.TryParse(_httpRequest[DISPLAY_LENGTH], out take);

        /* (Edited)
        list.aaData = _queriable.Where(ApplyGenericSearch)
                                .Where(IndividualPropertySearch)
                                .Skip(skip)
                                .Take(take)
                                .Select(SelectProperties)
                                .ToList();

        list.iTotalDisplayRecords = list.aaData.Count;
        */
        list.aaData = _queriable.Where(ApplyGenericSearch)
                                .Where(IndividualPropertySearch)
                                .Skip(skip)
                                .Take(take)
                                .ToList()
                                .AsQueryable()
                                .Select(SelectProperties)
                                .ToList();

        list.iTotalDisplayRecords = list.iTotalRecords;

        return list;
        }

I am a beginner at C#, .NET, Linq etc., though I know quite a few other languages.
Setup: Windows 7 64, Visual Studio 2017.

Thank you for your help!

Could you allow a customize option to export empty cells? The reason is if empty cells are not exported a style can not be applied because there is no cell definition. I would like to put a thin border around column B, but because cell B177 isn't defined the style will not be applied to B177 and when you look at the excel spreadsheet it looks ugly.

The current code (buttons.html5.js line 1040) skips over any null, undefined or blank cells.

                // For null, undefined of blank cell, continue so it doesn't create the _createNode
                if ( row[i] === null || row[i] === undefined || row[i] === '' ) {
                    continue;
                }

An update could look like

                    // For null, undefined of blank cell, continue so it doesn't create the _createNode
                    if (row[i] === null || row[i] === undefined || row[i] === '') {
                        if (config.exportEmptyCells) {
                            cell = _createNode(rels, 'c', {
                                attr: {
                                    r: cellId
                                }
                            });
                            rowNode.appendChild(cell);
                        }
                        continue;
                    }

I have this on the server

include( "DataTables.php" );


// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'customers' , 'custID')
    ->field(
        Field::inst( 'customers.custID' )->set(false),
        Field::inst( 'companyName' ),
        Field::inst( 'companyType' )
            ->options( Options::inst()
                ->table( 'companyTypes' )
                ->value( 'value' )
                ->label( 'label')
            ),
        Field::inst( 'address1' ),
        Field::inst( 'address2' ),
        Field::inst( 'address3' ),
        Field::inst( 'Town' ),
        Field::inst( 'Post_Code' ),
        Field::inst( 'Mobile' ),
        Field::inst( 'Telephone' ),
        Field::inst( 'Email' ),
        Field::inst( 'Notes' ),
        Field::inst( 'Member' )
        )
        ->join(
        Mjoin::inst( 'contacts' )
            ->link( 'customers.custID', 'contacts.custID' )
        ->fields(
        Field::inst( 'custID' )->set(false),
        Field::inst( 'FirstName' ),
        Field::inst( 'Surname' ),
        Field::inst( 'Mobile' ),
        Field::inst( 'Email' )
            )

            )


    ->process( $_POST )
    ->json();

on the client I have

  $("#dtCustomers").dataTable().fnDestroy();
        $('#dtCustomers').empty();
        tableCustomers = $('#dtCustomers').DataTable( {

        ajax: "http://www.xxx.com/xxxx.php",
        serverSide : true,
        customerData : data,
        scrollY: "300px",
        scrollCollapse: true,
        paging: true,
        info: false,
        select: true,
        ordering: true,
        order: [[0, 'desc']],
        dom: "Bfrtip",
        autoWidth : true,
        responsive: true,
        select: true,

I'm testing to see if I get any quicker results.

If I set serverSide:false the paging works as expected but if I set to false the paging is ignored.

What am i missing here ?

Cheers

Steve Warby

Dear
a query:
There is some complete template that you have. have with login menus and login, etc. etc. .
Thank you

https://editor.datatables.net/reference/field/upload fileReadText can be used to control the text shown "when a file is being read before it is uploaded"

My upload takes a bit of time, and there's no indication to the user that the Create window has even accepted his file. I.e., I still see "Choose file..." during the upload. Is there any way from Editor methods or options to control the text while the Create window is waiting for the ajax response?

I have a node.js program that I am working on but have not been able to get my dropdown column to work properly. I query a sql server database and populate the datatable. The last column is my "Format" column with a dropdown list where the user can select a format number (1-10). I need to be able to save whatever format selection is made and update the database after. I haven't been able to even get the correct selection to console.log.

//Here is where I have tried to console.log the selection after a selection is made.
//I only get whatever value is selected in the first row, not the row that was actually changed.

$('#Slapper').on('change', function(){
var value = $('#Slapper option:selected').val();
console.log(value);
});

//Here is where I create the datatable. The dropdown list looks fine visually but doesn't function at all:

function createBarcode(data){
mainTable = $('#Slapper').dataTable({
data: data,
columns: [
{title: "Barcode ID",
data: "barcodeID",
orderable: true,
visible: false},
{title: "Print",
data: "printYesNo",
render: function ( data, type, row ) {
if ( type === 'display' ) {
printArray[row.barcodeID] = row.printYesNo;
// console.log(printArray);
return '<input type="checkbox" class="editor-print" id='+ row.barcodeID+' >';
}
return data;
},
orderable: true,
visible: true},
{title: "Code",
data: "codeText",
orderable: true},
{title: "Commodity",
data: "Commodity",
orderable: true},
{title: "Variety",
data: "Variety",
orderable: true},
{title: "Grade",
data: "Grade",
orderable: true},
{title: "Style",
data: "Pack",
orderable: true},
{title: "Size",
data: "Size",
orderable: true},
{title: "Is Active",
data: "active",
orderable: true,
visible: false},
{title: "Label",
data: "Label",
orderable: true,
visible: true},
{title: "PLU",
data: "Lot",
orderable: true,
visible: true},
{
title: "Format",
data: "Format",
render: function(d,t,r){
var $select = $('<select id=' + r.barcodeID + '></select>', {
'id': r +'start',
'value': d,

        });
        $.each(formats, function(k,v){
               var $option = $('<option></option>', {
                'text': v,
                'value': v
            });
            if(d === v){
                formatArray[r.barcodeID] = r.Format;
                $option.attr('selected', 'selected')
            }
            $select.append($option);
        });
        return $select.prop('outerHTML');
    }
  },
],

I have included additional data in server-side but I couldn't find a way to get json response data in every ajax request.

Hi all,

since one week I get the following error message in one page what I never changed:
DataTables warning: table id=table_name - Invalid JSON response.

I checked all files and all forum but I don´t find why this error appears.

Today I look at the page resources and I saw that the following error appears in the file table.bookings_dm.php

<br />
<b>Fatal error</b>: Uncaught Error: Call to undefined function number() in /php/Editor/Field.php:593
Stack trace:

0 /php/Editor/Editor.php(803): DataTables\Editor\Field->optionsExec(Object(DataTables\Database)) 1 /php/Editor/Editor.php(555): DataTables\Editor->_get(NULL, Array) 2 /table.bookings_dm.php(120): DataTables\Editor->process(Array) 3 {main} thrown in <b>/php/Editor/Field.php</b> on line <b>593</b><br />

Can someone help me please? Show me a way because I really have not changed anything in the files.

Best

Using server side code with joined tables and i'm curious if I'm seeing expected behavior or a problem hiding with my code. When clicking to edit, the existing value isn't there. If it's text, it's blank. If it's a select box, it's not selecting the existing option.

Also, the bigger problem is it's submitting the entire row of data, even though that option is not selected. I assume it has to do with using joined tables. This may be ok but since the existing selected values are not being selected it's submitting the wrong value of the select box.

Forgive the amateur coding skills.

    editor = new $.fn.dataTable.Editor( {
        ajax: "./cmsUpdateOrder.php?dowhat=dashboardfieldupdate",
        table: "#openorders",
        fields: [ {
                label: "Contractor:",
                name: "CMS_workorders.ContractorId",
                type: "select",
                options: [
<?
            foreach ($clist as $c) {
                print "{ label: '$c[fullname]', value: '$c[userid]' },";
            }
?>
                    { label: "Unassigned",  value: "0" }
                ]
            }, {
                label: "Crew:",
                name: "CMS_workorders.crew"
            }, {
                label: "Status:",
                name: "CMS_workorders.status"
            }
        ]
    } );


    // Activate an inline edit on click of a table cell
    $('#openorders').on( 'click', 'tbody td.ooeditable', function (e) {
        editor.bubble( this );
    } );

Hi there,

I have created a database test.sqlite3 in DB Browser for SQLite, then I tried to import file sqlite.sql that comes with the downloadable package Editor-PHP.1.7.0.zip. I get the following error:

Error importing data: Error in statement #23: not an error. Aborting execution and rolling back.

Do you know what is causing this error or what I should do to fix it? Thanks.

Cheers, Manuel

1. Use the Generator for Editor to create application server-side php.

2. Edit/Add code from example: (Bottom of HTML or table.example.js file)

A. Javascript code from "Footer Feedback" example:

$(document).ready(function() {
$('#example').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 4, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 4 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

} );

B. Code from table.example.js file

/*
* Editor client script for DB table example
* Created by http://editor.datatables.net/generator
*/

(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.example.php',
table: '#example',
fields: [
{
"label": "First name:",
"name": "first_name"
},
{
"label": "Last name:",
"name": "last_name"
},
{
"label": "Position:",
"name": "position"
},
{
"label": "Office:",
"name": "office"
},
{
"label": "Salary:",
"name": "salary"
}
]
} );

var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    ajax: 'php/table.example.php',
    columns: [
        {
            "data": "first_name"
        },
        {
            "data": "last_name"
        },
        {
            "data": "position"
        },
        {
            "data": "office"
        },
        {
            "data": "salary"
        }
    ],
    select: true,
    lengthChange: false,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );

} );

}(jQuery));

Question: Where would I add or edit "Footer Feedback" example code? Do I edit the table.example.js or add it to the bottom on the HTML file?

If I add the code to the table.example.js file I receive the error:

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3.

Hey guys,

I need to add some sort of audit logging for create/delete and edit functions on the data-tables editor. Any examples and help
would be much appreciated.

I'm looking to dump data into an audit table on each action.. something really simple.. doesn't have to dump username or anything.. just data trail.. date+action+data_before+data_after

Example for an edit

[field: date] = {2017-01-10 : 19:05:23}
[field: action] = {edit}
[field: data_before] = {id=1, name="foo baarson", age=110, info="too old"}
[field: data_after] = {id=1, name="bar fooson", age=110, info="too old"}

Example for a create

[field: date] = {2017-01-10 : 19:05:23}
[field: action] = {create}
[field: data_before] = {}
[field: data_after] = {id=1, name="bar fooson", age=110, info="too old"}

Example for a delete

[field: date] = {2017-01-10 : 19:05:23}
[field: action] = {delete}
[field: data_before] = {id=1, name="foo baarson", age=110, info="too old"}
[field: data_after] = {}

This way you can write a recovery script to the side.. like an 'undelete' button.. or even have one inline in the table.

I'm using dataSrc in rowReorder, but I keep getting the Uncaught Unknown field name - order error. I'm using a field that isn't in the table itself, but is in each object returned from the server.

rowReorder: {
    selector: 'tr',
    dataSrc: 'order',
    editor: editor
}

Hi,

I am using Editor Inline Editing with the multi-select outside the editor to filter the rows.

The Inline Editing works fine without triggering the multi-select onChange event as I can click into each cell to perform the inline editing.

The line editing gave me the attached error when I triggered the onChange event of multi-select to perform the filtering.

The code for the multiselect is below:

var editor;
var oTable;

$('#pmandtechnicians').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
onChange: function () {
selected1 = $('#pmandtechnicians').val();
console.log(selected1);
$('#selectedPMandTechnicians').val(selected1);
InitTable(editor, oTable);
}
});

The InitTable(editor, oTable) code is here:

function InitTable(editor, oTable) {
var projectTaskActions = urlactions.init('@Url.RouteUrl(new { area = "", controller = "Project" })/{action}/{id}');

            var taskStatus = [{ "label": "Not Applicable", "value": "0" },
                        { "label": "Not Required", "value": "1"},
                        { "label": "Started", "value": "2"},
                    { "label": "Complete", "value": "3"},
                    { "label": "High Priority", "value": "4"}];

            var closedStatus = [{ "label": "Not Applicable", "value": "0" },
                    { "label": "Complete", "value": "3"},
                    { "label": "High Priority", "value": "4"}];

            oTable = $('#projecttasks').DataTable({
                "dom": "Bfrtip",
                "destroy": true,
                "lengthMenu": [[10, 20, 25, 50, -1], [10, 20, 25, 50, "All"]],
                "fixedHeader": {
                    headerOffset: 50
                },
                "search": {
                    "caseInsensitive": true
                },
                "fnRowCallback": function (nRow, aData) {
                    var isClosed = aData.Task17; // ID is returned by the server as part of the data
                    var $nRow = $(nRow); // cache the row wrapped up in jQuery
                    if (isClosed == 3) {
                        $nRow.css({ "background-color": "LightBlue" })
                    }
                    return nRow
                },
                "stateSave": true,
                "iDisplayLength": -1,
                "order": [[ 1, "asc" ]],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "@Url.HttpRouteUrl("ActionApi", new { controller = "ProjectTask", action = "GetProjectTasks", area = "" })",
                    "data": { pmandtechnicians: $('#pmandtechnicians').val(), roles: $('#roles').val() },
                    "type": "POST"
                },
                "select": {
                    style:    'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    {
                        "data": "ProjectSource",
                        "render":
                            function (data, type, row) {
                                    return projectTaskActions.renderUrls([
                                    { id: row.ProjectId, action: 'Edit', glyph: 'edit', title: "Edit project", class: "edit-project showDialog" },
                                    { id: row.ProjectId, action: 'Detail', glyph: 'search', title: "View Details", class: "view-details showDialog" }
                                      ]);
                                    ]);
                                }
                            },
                        "sortable": false,
                        "class": "grid-actions"
                    },
                    { "data": "ProjectNumber" },
                    { "data": "ProjectName" },
                    {
                        "data": "Task1",
                        "editField": "Task1",
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return getIconByData(data);
                            }
                            return data;
                        }
                    },
                    {
                        "data": "Task2",
                        "editField": "Task2",
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return getIconByData(data);
                            }
                            return data;
                        }
                    },
                    {
                        "data": "Task3",
                        "editField": "Task3",
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return getIconByData(data);
                            }
                            return data;
                        }
                    },
                    { "data": "Notes",  "editField": "Notes", className: "color-red"  }
                ]
            });

            editor = new $.fn.dataTable.Editor( {
                "ajax": {
                    "url": "@Url.HttpRouteUrl("ActionApi", new { controller = "ProjectTask", action = "GetProjectTasks", area = "" })",
                    "type": "POST"
                },
                table: "#projecttasks",
                idSrc:  "Id",
                fields: [ {
                    label: "Task1",
                    name: "Task1",
                    type: "select",
                    ipOpts: taskStatus
                }, {
                    label: "Task2",
                    name: "Task2",
                    type: "select",
                    ipOpts: taskStatus
                }, {
                    label: "Task3",
                    name: "Task3",
                    type: "select",
                    ipOpts: taskStatus
                }, {
                    label: "Notes",
                    name: "Notes"
                }
                ]
            } );

            $('#projecttasks').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( oTable.cell(this).index(), {
                    onBlur: 'submit'
                } );
            } );
        }

Please help to identify what is the issue here.

Thanks,

how i save columns reordering state in database?
how i sent column order in database???

I have a datatable rendering a master/detail sort of display using code found here.
When I init the table I user a render function to add a "plus" icon to one of the cells. The idea being that when you click on that plus icon the detail expands. This works great. What I am trying to do is change that plus icon to a "minus" icon when the detail table is being shown so that it indicates that you click it to close the detail table.

My onClick function is straight from the examples.

$('#indexTable tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = rollup.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });

The function I call on rendering the column is:

var detail = function (data, type, full, meta) {
                if (data != null ) {
                    return '<i class="fa fa-plus-square-o fa-2x" title="'+data+'"></i>'
                } else if (data == null) {
                    return 'N/A'
                }
            };

I'm trying to figure out the proper way to change the contents of that rendered column to:

<i class="fa fa-minus-square-o fa-2x" title="'+data+'"></i>

I'm storing some data on the client (localStorage) that contains a list of ids that should be excluded from the table on initialization. I don't have the ids server-side, so this has to happen on the client. I thought this would be simple by using the rowCallback, but I can't seem to figure out how to remove the row if it's in my list of excludes. Here's my best attempt so far. I don't get any errors, just nothing happens and the rows are still there:

rowCallback: function( row, data, index ) {
  if ( aScanCult.indexOf(data[1]) > -1 ) row.remove();
}

Surely this can be done before the table builds rather than after it's all ready, right?

Hi,

Is it possible to join two tables in the PHP option class?

 Field::inst( 'users.site' )
        ->options( Options::inst()
            ->table( 'sites' )
            ->value( 'id' )
            ->label( 'name' )
        )

In the example table is "sites", but is it possible to connect it to another table, for example the table domains" and do a where domains.sites_id = sites.id?

How can I get the ASP.NET MVC Editor examples to work again now that I purchased Editor?