Paging button need "show entries update" to work...if i dont update dataTables via show entries, the paging button link to undefined 404 page. Any hint...tk

I need to get the sum of total amount in the footer of the table whenever the filter and date filter is done .

This is my code attached

Let me know on where to add the sum

Hi,

I have a .net MVC5 architecture with entity framework, separated in front end and backend where I use the editor, is there any way to validate the editor data without having to use the data context?

Just start process and Created a table with Table Editor, Here is the error I get when I run the HTML page created.

DataTables warning: table id=tabling - An error occurred while connecting to the database ''. The error reported by the server was: could not find driver.

How do I fix this?

I have certain columns that have only an icon to allow users to click and download files. These columns are defined as %1 width as shown below.

{
                                data: 'FIG',
                                orderable: false,
                                targets: 5,
                                width: '1%',
                                "searchable": false,
                                createdCell: function (td, cellData, rowData, row, col) {
                                    $.getFIGColumnHTML(rowData, td)
                                }
                            },

Here is the function that is called to format the HTML:

            jQuery.getFIGColumnHTML = function (rowData, td) {
                var result;

                if ((rowData.FIG !== undefined) & (rowData.FIG !== null)) {
                    if (rowData.FIG !== '00000000-0000-0000-0000-000000000000') {
                        $(td).html('<img class="FIGLink" src="/content/images/FIG_pdf.gif">');
                    }
                    else {
                        $(td).html('<img src="../content/images/fig_pdf_off.gif" alt="FIG">');
                    }
                }
            }

I execute searches and the width works as defined. I then do a search returning a larger # of results and the width of that specific column widens. I'm not sure if the larger result set has anything to do with the issue. The css below shows up as inline in the debugger. The first example is the HTML with the correct width. The second example is the HTML with the incorrect width.

Thanks in advance for any ideas.

Tom

<th class="sorting_disabled" tabindex="0" aria-controls="grid" rowspan="1" colspan="1" style="width: 27px;" aria-label="FIG">FIG</th>

element {
    width: 27px;
}

<th class="sorting_disabled" tabindex="0" aria-controls="grid" rowspan="1" colspan="1" style="width: 299px;" aria-label="FIG">FIG</th>

element {
    width: 299px;
}

We have tried following code but it does not work.

We need to implement this on jquery.datatable.min.js

I created a JS fiddle to show this: https://jsfiddle.net/q0ruv6sx/2/

I am instantiating this by the following code:

                    ThisDataTable = $('#MyTable').DataTable({
                        data: TableData,
                        buttons: [
                            {
                                extend: 'pdfHtml5',
                                download: 'open'
                            },
                            'print'
                        ],
                        columns: [
                            { title: "Number" },
                            { title: "Name" },
                            { title: "Start Date" },
                            { title: "Customer" },
                            { title: "Location" },
                            { title: "Sales Person" }
                        ]
                    });

I have tried without the pdfHtml5 button as well.

I am including all of the recommended JS and CSS from the download tool provided.

Hi,

I am using DataTables button as a link to another page, code is shown below. However I cannot find a way to handle wheel click on the button in order to open the same link in new tab because href is set to '#'. It seems like the action is never executed on a wheel click, so e.preventDefault() won't help...

Is there a way to support wheel click?

action : function(e, dt, node, config) {
                var processedLink = link;
                ref.forEach(function(currentValue, index, array) {
                    processedLink = processedLink.replace("{" + index + "}", dataTablesSelected(dt, currentValue, button.attr("extend")));
                });

                window.location = processedLink;
            }

This is a tough one ...at least for me. I have a simple input radio button that is available in every row which is created in a column render. The problem is when the radio is selected it does not have the 'checked' attribute associated to it, however if i pre-set the radio value as 'checked' it the column render it does have the 'checked' attribute associated to it. I was able to test this with a button that iterates over the table rows and checks the value of each button. I hope someone can help me out with this.

This does not work...

         {sortable: false,
                "render": function ( data, type, full, meta ) {
                           return '<input type="radio" id="plantManagerApprovalRadio_'+ table.data().count() +'" >'
               }// End - "render": function ( data, type, full, meta )
            },

This does work...

         {sortable: false,
                "render": function ( data, type, full, meta ) {
                           return '<input type="radio" id="plantManagerApprovalRadio_'+ table.data().count() +'" checked >'
               }// End - "render": function ( data, type, full, meta )
            },

Full script

<script type="text/javascript" src="/js/jquery-current.min.js"></script>
<script type="text/javascript" src="/jquery-ui-1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/DataTables_Editor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="/js/dataTables.rowGroup.min.js"></script>

<script type="text/javascript">

var editor; //global for the submit and return data rendering
var table; // global for the data table
//****************************************************************************
//** $(document).ready(function()
//****************************************************************************
$(document).ready(function() {

  editor = new $.fn.dataTable.Editor( {
             ajax: "ssp_xxxxxxx.php",
             table: "#approvalTable",
             fields: [{label: "Percent of Increase",
                       name:  "xxxPER",
                       attr: {maxlength:4,
                               style:"height:20px; width:50px",}
                        },
                      {label: "Review Score",
                       name:  "xxxWREV",
                       attr: {maxlength:3,
                              style:"height:20px; width:35px",}
                       },
                       {label: "Effective Date",
                        name: "xxxEDT",
                        attr: {style:"height:20px; width:80px",},
                        type: "datetime"
                         },
                        {label: "Comments",
                          name: "xxxCOM",
                          attr: {maxlength:500},
                          type: "textarea"
                        },
                 ]
    } );
   // Activate an inline edit on click of a table cell
  $('#approvalTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
      editor.inline( this, {
          onBlur: 'submit'
      } );
   } );

   table = $('#approvalTable').DataTable( {
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        fixedColumns: {
                       leftColumns: 6,
                       rightColumns: 5
        },
       scrollX: true,
       ajax: "ssp_xxxxxxxx.php",
        type: 'POST',
        order: [[2, 'asc']],
        columns: [
             // *** Fixed left columns
            { data: "numeric_month", "visible": false },
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
             },
            { data: "xxxLOCD"},
            { data: "month_name"},
            { data: "xxxEMPN" },
            { data: "xxxNAME" },

       // *** Scrollable columns
            { data: "xxxMGNA" },
            { data: "xxxMGN2" },
            { data: "xxxMGN3" },
            { data: "xxxMGN4" },
            { data: "xxxMGN5" },
            { data: "xxxRWPER" },
            { data: "xxxWREV" },
            { data: "xxxDNAM" },
            { data: "xxxTITL" },
            { data: "xxxJBGD" },
            { data: "xxxYREG" },
            { data: "xxxWNEW" },
            { data: "xxxWAMT" },
            { data: "xxxDLIN" },
            { data: "xxxSEDT" },
            { data: "xxxMIN" },
            { data: "xxxMID" },
            { data: "xxxMAX" },
            { data: "xxxOCOM" },
            { data: "xxxNCOM" },

            // *** Fixed Right columns

            // ** Comments Button
            {sortable: false,
                "render": function ( data, type, full, meta ) {
                if(full.xxxWCOM.trim() == ""){
                      return '<button class="gray button" onclick="openCommentDialog('+ full.xxxEMPN +', \''+ full.xxxNAME +'\' )">Comments</button>';
                }else{
                      return '<button class="blue button" onclick="openCommentDialog('+ full.xxxEMPN +', \''+ full.xxxNAME +'\' )">Comments</button>';
                     }
               }// End - "render": function ( data, type, full, meta )
            },

            // ** Plant Manager Approval Button
            {sortable: false,
                "render": function ( data, type, full, meta ) {
                           return '<input type="radio" id="plantManagerApprovalRadio_'+ table.data().count() +'" >'
               }// End - "render": function ( data, type, full, meta )
            },
         ],

        columnDefs: [
                       {"targets": [ 0 ],
                        "orderData": [ 0, 2 ]
                       },

                       {"targets": [ 2 ],
                        "orderData": [ 0, 2 ]
                       },

                       {"className": 'dt-center',
                        "targets": [ 25, 26, 27, 28, 29, 28]
                       },
                       {"targets": [25, 26, 27, 28, 29,28],
                        "orderable": false
                       },
                       {
                        'targets': [4],
                        'createdCell':  function (td, cellData, rowData, row, col) {
                                    $(td).attr('id', 'employeeID_' + table.data().count());
                            }
                        }
                  ],

                  select: {
                      style:    'os',
                      selector: 'td:first-child'
                  },

                   buttons: [
                 //     { extend: "create", editor: editor },
                      { extend: "edit",   editor: editor },
                  //    { extend: "remove", editor: editor }
                  ]
    } );

} );//END $(document).ready(function()
//************************************************************************
function approveIncrease(){

    var rows = table.data().count();

    for (i = 1; i < rows; i++) {

         var isChecked = $("#plantManagerApprovalRadio_"+ i).attr('checked');
         alert(isChecked);

    }//* End - for (i = 1; i < row; i++)


}//*End - approveIncrease
</script>

How to do

MY Codes:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "staff.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: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime",
                def:   function () { return new Date(); },
                format: 'DD.MM.YYYY HH:mm'
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );


    var table = $('#example').DataTable( {
        lengthChange: false,
        ajax: {
            url: "xxx.php",
            type: "POST"
        },
        dom: "<'row'<'col-sm-6'><'col-sm-6'f>>" +"<'row'<'col-sm-12'tr>>" +"<'row'<'col-sm-5'li><'col-sm-7'p>>",
        processing: true,
        serverSide: true,
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date"},
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,

1rd try

"columnDefs": [ {
    "targets": 1,
    "data": "first_name",
    "render": function ( data, type, row, meta ) {
      return '<a href="URL\test.php?ID='+data.ID+'">'+data+'</a>';     }
 }
]

this is returning http://URL/test.php?ID=undefined

2rd try

"columnDefs": [ {
    "targets": 1,
    "data": "first_name",
    "render": function ( data, type, row, meta ) {
      return '<a href="URL\test.php?ID='+data.RowID+'">'+data+'</a>';     }
 }
]

this is returning http://URL/test.php?ID=undefined

3rd try

"columnDefs": [ {
    "targets": 1,
    "data": "first_name",
    "render": function ( data, type, row, meta ) {
      return '<a href="URL\test.php?ID='+data.DT_RowID+'">'+data+'</a>';     }
 }
]

this is returning http://URL/test.php?ID=undefined

4rd try

"columnDefs": [ {
    "targets": 1,
    "data": "id",
    "render": function ( data, type, row, meta ) {
      return '<a href="URL\test.php?ID='+data+'">'+data+'</a>';     }
 }
]

this is returning http://URL/test.php?ID=undefined

If for some reason only a subset of the rows can be deleted from the DB, e.g. table constrains, is there a way to report that back so the editor doesn't remove those rows from the GUI?

Can you please check what did I missed in my datatable. I've created a simple search but it's not filtering.

<input type="text" id="txtserial" name="txtSerial" class="form-control" />

Here's my javascript:

       var dtmyJob = $('#myJob').DataTable({
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            iDisplayLength: -1,
            sScrollY: "40vh",
            bScrollInfinite: true, //this property disables pagination
            "scrollCollapse": true,
            "paging": false,
            "bInfo": false,
            "bFilter": false,
            "bSort": false
        });

        $("#txtserial").on('keyup', function () {
            dtmyJob.columns(2).search(this.value).draw();
            alert(dtmyJob);
        });

Hi,

I just tried all the examples for editor and I've found a bug on your example page https://editor.datatables.net/examples/extensions/excel.html

1) When I click into a cell, enter new content and want to drag the just entered text without pressing return before, it reverts my edit and doesn't fill the other cells.
2) Also, I can't select other cells afterwards until I reload the page.

The postCreate event does not seem to fire when a new row is created. The row is created but the view is not updated. I have a work around to make the grid update but I really need to hook into this event.

I verified that I can run the WebApi demos and the event does not fire there also so apparently, it isn't something I'm doing.

Can you help?

Thanks,
Mike #datatablesrocks

Hello,
Is there a way to jump to specific TD id? I'm using pagination.

How can we do implement OR logic between two columns

Each buttons file (buttons.bootstrap.js, buttons.colVis.js etc) defines define( ['jquery', 'datatables.net-bs', 'datatables.net-buttons']
So this causes a problem because then requireJs complains that there is a "Duplicate definition". Am I not supposed to be bundling each buttons.xxx.js file together?

Please provide solution for:

var jq = jQuery.noConflict();
var paramsKeyDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table = new Array();
paramsKeyDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table[0]='id';
paramsKeyDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table[1]='Status';
paramsKeyDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table[2]='Description';
paramsKeyDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table[3]='Date';
paramsKeyDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table[4]='Actions';
var filter='';
var drawCounter = 0;
function loadDataFromServerDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table(filterData, targetid) {
var isFirstDraw = true;
cleanTableData(targetid);
filter = filterData;
oTableDevices_DeviceOverwiew_Details_PresetTesting_LastActions_table = jq('#'+targetid).dataTable( {
"fnDrawCallback": function() {
if (isFirstDraw && drawCounter==0) { jq('#'+targetid+'length').hide();
jq('#'+targetid+' thead>tr>th').hide();
jq('#'+targetid+'_filter').hide(); }
},
"bDestroy": true,
"bRetrieve": true,
"iDisplayStart": 0,
"iDisplayLength": 1000,
"iDisplayLength": 20,
"bLengthChange": true,
"oLanguage": {
"sLengthMenu": "Show _MENU entries ",
"sZeroRecords": "No records found",
"sInfo": "Showing START to END of TOTAL entries ",
"sInfoEmpty": "No entries are available",
"sInfoFiltered": "Search MAX",
"sSearch": "Search",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
}
},
"sDom": ' rt',
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": "/subscriptionUI/deviceOverview/lastTransactions?"+filter,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if (isFirstDraw) {
jq('#'+targetid+'_filter').show(); jq('#'+targetid+'_length').show();
jq('#'+targetid+' thead>tr>th').show(); isFirstDraw = false; drawCounter=drawCounter+1;
}
for(var i = 0; i < aData.length; i++) {
if(aData[i] && aData[i] != '') {
var maxLength = 20;
maxLength = 14;
if(!aData[i].match(/\s+/g) && aData[i].length > maxLength) {
var element = jq('td:eq('+i+')', nRow)
element.html(aData[i].wordWrap(maxLength, '<br/>', true) )
}}}
var formString = '';
var formid = 'Devices_DeviceOverwiew_Details_PresetTesting_LastActions_table-showXml-' + iDisplayIndex;
var xSubmitString = 'xsubmit(\'#'+ formid+'\',\'#skyw-dialog-template\')';
formString += '

';
formString += '<a href="#" onclick="xskywCall(\''+formid+'\')">';
formString += 'Show XML</a>';
jq('td:eq(4)', nRow).html( formString);
return nRow;
}
,"aoColumns": [
null,
null,
null,
null,
null
] } );
}

jq.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource,
fnCallback, bStandingRedraw) {
if (typeof sNewSource != 'undefined' && sNewSource != null) {
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay(oSettings, true);
var that = this;
var iStart = oSettings._iDisplayStart;

oSettings.fnServerData(oSettings.sAjaxSource, null, function(json) {
    /* Clear the old information from the table */
    that.oApi._fnClearTable(oSettings);

    /* Got the data - add it to the table */
    if(json!=null){
        for ( var i = 0; i < json.aaData.length; i++) {
            that.oApi._fnAddData(oSettings, json.aaData[i]);
        }
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    that.fnDraw(that);

    if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
        oSettings._iDisplayStart = iStart;
        that.fnDraw(false);
    }

    that.oApi._fnProcessingDisplay(oSettings, false);

    /* Callback user function - for event handlers etc */
    if (typeof fnCallback == 'function' && fnCallback != null) {
        fnCallback(oSettings);
    }
});

}

Error is occur when i migrate jQuery version to 3.2.1 (jQuery 1.4 its working fine)
DataTable version is 1.7.X

First of all, a bit of background - recently started my first asp.net core project, or it would more precise to say first dev project in like 10 years, so yeah, currently rate myself a newb in development.

So when I got the multi-tenancy, authentication, authorization done, I started to look for UI elements for my project, came across datatables, and was pretty sure that I would love to include this UI element in my project. Editing data grids is a must for me, so it was disappointing to find out that there is no libraries for asp.net core for Editor server-side. Although I haven't yet bought it, I decided to try to implement the server side myself. Long story short, 2 days later I have editable table, and I am willing to share my solution, as it could help someone else or me (by someone improving upon it). So here we go.

1. Models

    public class ProjectType

    {
        [Required]
        public int Id { get; set; }
        [Required]
        public string ProjType { get; set; }


    }

 public class ProjectTypeDTable : ProjectType
    {
        public string DT_RowId { get; set; }
    }

1. Editor and datatable initialization

    <script type="text/javascript">


        $(document).ready(function () {

            var editor = new $.fn.dataTable.Editor({
                ajax: {
                    url: '/api/dtprojecttype',
                    data: function (d) {
                        return JSON.stringify(d);
                    },
                    contentType: "application/json"
                },
                table: '.projecttypes-table',
                idSrc: 'id',

                fields: [
                    {
                        name: "projType",
                        label: "Project Type: "
                    }
                ],
            });

          var generateProjectTypesTable =
                $('.projecttypes-table').DataTable({
                    columns: [
                        {
                            data: "id",
                            searchable: false,
                        },

                        { data : "projType" }

                    ],
                    ordering: true,
                    paging : true,
                    pagingType : 'full_numbers',
                    pageLength : "25",
                    select : true,
                    dom: '<"html5buttons"B>lTfgitp',
                    buttons : [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                        { extend: 'remove', editor: editor },
                        { extend: 'copy' }
                    ]

                });

            //$('.projecttypes-table').on('click', 'tbody td', function () {
            //    editor.inline(this);
            //});

        });

    </script>

1. Server side api action

 public async Task<IActionResult> Post([FromBody]JObject request)
        {
            //split incomming JSON object into action and data JTokens
            var action = request.GetValue("action").ToString();
            var data = request.GetValue("data");

            IList<ProjectTypeDTable> testchangedobjects = new List<ProjectTypeDTable> { };
            test

            //define new list for changed objects
            IList<ProjectTypeDTable> changedobjects = new List<ProjectTypeDTable> { };

            //parse json to class objects
            changedobjects = changedobjects.DTableEditParser(request, "Id", "Int");

            //create empty List for response objects
            IList<ProjectTypeDTable> responseobjects = new List<ProjectTypeDTable> { };


            if (action == "create")
            {
                foreach (var x in changedobjects)
                {
                    var changed = new ProjectType
                    {
                        ProjType = x.ProjType
                    };

                    changed = await _tenantdbrepo.AddProjectTypeAsync(changed);

                    responseobjects.Add(new ProjectTypeDTable { Id = changed.Id, ProjType = changed.ProjType, DT_RowId = "row_" + changed.Id.ToString() });
                };
            }
            else if (action == "edit")
            {
                foreach (var x in changedobjects)
                {
                    var changed = new ProjectType
                    {
                        Id = x.Id,
                        ProjType = x.ProjType
                    };

                      changed =  await _tenantdbrepo.UpdateProjectTypeAsync(changed);
                    responseobjects.Add(new ProjectTypeDTable { Id = changed.Id, ProjType = changed.ProjType, DT_RowId = x.DT_RowId ?? "row_"+changed.Id });
                };
            }
            else if (action == "remove")
            {
                foreach (var x in changedobjects)
                {
                    var changed = new ProjectType
                    {
                        Id = x.Id,
                        ProjType = x.ProjType
                    };
                    await _tenantdbrepo.RemoveProjectTypeAsync(changed);
                };
            };


            if (responseobjects.Any())
            {
                dynamic response = new
                {
                    data = responseobjects
                };
                return Json(response);
            }
            else
            {
                dynamic response = new { };
                return Json(response);
            };

        }

1. My extension that parses the json to objects

public static class DatatablesEdit
    {


    public static IList<T> DTableEditParser<T>(this IList<T> source,  JObject json, string id, string idtype)
        {
            //split incomming JSON object into action and data JTokens
            var action = json.GetValue("action").ToString();
            var data = json.GetValue("data");

            IList<T> changedobjects = new List<T> { };

            foreach (JProperty x in data)
            {
                //initialize empty object of class
                T changedobject = (T)Activator.CreateInstance(typeof(T));


                //set object's ID property to JSON objects Name
                if (idtype =="int")
                {
                    changedobject.GetType().GetProperty(id).SetValue(changedobject, Int32.Parse(x.Name.ToString()));
                } else if (idtype == "string")
                {
                    changedobject.GetType().GetProperty(id).SetValue(changedobject, x.Name.ToString());
                }



                //loop through each of JSON object sub properties, change the property name from camel case to pascal case and map to object's properties
                foreach (JProperty y in x.Value)
                {
                    string propertyname = char.ToUpper(y.Name[0]) + y.Name.Substring(1);

                    if (changedobject.GetType().GetProperty(propertyname).PropertyType.Name == "String")
                    {
                        changedobject.GetType().GetProperty(propertyname).SetValue(changedobject, y.Value.ToString());
                    }
                    else if (changedobject.GetType().GetProperty(propertyname).PropertyType.Name == "Integer")
                    {
                        changedobject.GetType().GetProperty(propertyname).SetValue(changedobject, Int32.Parse(y.Value.ToString()));
                    }
                }
                //add object to changed objects List
                changedobjects.Add(changedobject);
            }


            return changedobjects;
        }

    }

I am sure that the code is far from optimal, but I am pretty proud of myself to get this working. Any improvements appreciated.

how i use statecall back function in Angular4???

in angular4 ajax not work so how can i send data to data base??