Hi,

I'm trying to make a running total column in a table.

A solution I came up with accesses the value of a cell in the previous row using:

meta.settings.aoData[meta.row-1].anCells[3].innerText

but this seems a little hacky, is there a better way?

code here:
http://codepen.io/jasonblewis/pen/egVPNP?editors=0010

any advice would be appreciated.

I have my table with both inline edit and keytable activated. My problem is when i use navigation arrow to switch between field to edit, it will clear up the content , i can't append text to existing field. Any setting needed so that i can have keytable to work with inline edit? i tried turn off keytable then i can append text to field without any problem. Kindly advise

Hello
I have a table and I am using this function to clear and draw the table like this

var table = $('#example').DataTable();
table.clear().draw(false);
table.row.add().draw(false);

what if i use

var table = $('#example').DataTable();
table.clear().draw();
table.row.add().draw(false);

I don't understand what is the false is doing in both draw. because i am facing some issue that you can find in here.
http://stackoverflow.com/questions/41957506/datatable-not-showing-the-data-but-table-is-filled-with-data-using-json-object

Kindly reply me according to the question that i have posted on the stackoverflow.

Thanks.

jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'length' of undefined

'''[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public string GetTableData()
{
var echo = int.Parse(HttpContext.Current.Request.Params["sEcho"]);
var displayLength = int.Parse(HttpContext.Current.Request.Params["iDisplayLength"]);
var displayStart = int.Parse(HttpContext.Current.Request.Params["iDisplayStart"]);
var sortOrder = HttpContext.Current.Request.Params["sSortDir_0"].ToString(CultureInfo.CurrentCulture);
var roleId = HttpContext.Current.Request.Params["roleId"].ToString(CultureInfo.CurrentCulture);

        var records = GetRecordsFromDatabaseWithFilter().ToList();
        if (!records.Any())
        {
            return string.Empty;
        }

        var orderedResults = sortOrder == "asc"
                             ? records.OrderBy(o => o.ReqNo)
                             : records.OrderByDescending(o => o.ReqNo);
        var itemsToSkip = displayStart == 0
                          ? 0
                          : displayStart + 1;
        var pagedResults = orderedResults.Skip(itemsToSkip).Take(displayLength).ToList();
        var hasMoreRecords = false;

        var sb = new StringBuilder();
        sb.Append(@"{" + "\"sEcho\": " + echo + ",");
        sb.Append("\"recordsTotal\": " + records.Count + ",");
        sb.Append("\"recordsFiltered\": " + records.Count + ",");
        sb.Append("\"iTotalRecords\": " + records.Count + ",");
        sb.Append("\"iTotalDisplayRecords\": " + records.Count + ",");
        sb.Append("\"aaData\": [");
        foreach (var result in pagedResults)
        {
            if (hasMoreRecords)
            {
                sb.Append(",");
            }

            sb.Append("[");
            sb.Append("\"" + result.Id + "\",");
            sb.Append("\"" + result.ReqName + "\"");
            sb.Append("]");
            hasMoreRecords = true;
        }
        sb.Append("]}");
        return sb.ToString();
    }

    private static IEnumerable<tbl_Ticket> GetRecordsFromDatabaseWithFilter()
    {
        HajtRequestDataContext dataContext = new HajtRequestDataContext();
        //var RequestList =
        //return RequestList.ToList();
        List<tbl_Ticket> mylist = new List<tbl_Ticket>();


        var test = (from e in dataContext.tbl_Tickets
                    select e).ToList();
        mylist = test;
        return mylist;

    }

<div class="row">
    <div class="col-xs-12">

        <div class="box">
            <div class="box-header">
                <h3 class="box-title">All Admin Request List</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">

                <table id="tblData" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>ReqName</th>
                        </tr>
                    </thead>
                    <tbody></tbody>

                </table>
            </div>
        </div>
    </div>

Hello @Alan
Please check this bin with Access-Control-Allow-Origin enabled
Check the Priority column. It doesn't seem to be ordered. Table is ordered by column #0 instead...
Screenshot
I've also tried data render within ColumnDefs - same problem. When I tried the same with no server side data load - works fine,
Will appreciate your help!
Thanks

Hi all,

i have a problem with one of my tables. It has joined data on an oracle-db, when trying to edit a row or insert a new one.

Here are my codes:

PHP

<?php

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

// DataTables PHP library and database connection
include( "lib/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, 'STG_TAB_ARTIKEL a', 'a.PK_ARTIKEL_ID' )
        ->debug(true)
        ->fields(
            Field::inst( 'a.ARTNR' )
                ->validator( 'Validate::unique' )
                ->validator( 'Validate::required' )
                ->validator( 'Validate::numeric' ),
            Field::inst( 'a.FK_STG_TAB_ARTKAT' )
                ->options( Options::inst()
                    ->table( 'STG_TAB_ARTIKELKATEGORIE' )
                    ->value( 'ARTKATNR' )
                    ->label( 'ARTKAT' )
                )
                ->validator( 'Validate::dbValues' ),
            Field::inst( 'a.ARTBEZ' )
                ->validator( 'Validate::notEmpty' ),
            Field::inst( 'a.ARTMAß' ),
            Field::inst( 'ak.ARTKAT' )
        )
        ->leftJoin( 'STG_TAB_ARTIKELKATEGORIE ak', 'ak.ARTKATNR', '=', 'a.FK_STG_TAB_ARTKAT')
        ->process( $_POST )
        ->json();

?>

JS

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

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'sources/table.STG_TAB_ARTIKEL.php',
        table: '#STG_TAB_ARTIKEL',
        fields: [
            {
                "label": "Artikel:",
                "name": "a.ARTNR"

            },
            {
                "label": "Artikelkategorie:",
                "name": "a.FK_STG_TAB_ARTKAT",
                "type": "select",
                "placeholder" :  "Bitte Kategorie auswählen.."
            },
            {
                "label": "Bezeichnung:",
                "name": "a.ARTBEZ"
            },
            {
                "label": "Maße:",
                "name": "a.ARTMAß"
            }
        ]
    } );


    var table = $('#STG_TAB_ARTIKEL').DataTable( {
        dom: 'Bfrtip',
        ajax: 'sources/table.STG_TAB_ARTIKEL.php',
                serverSide: true,
        scrollY:        '70vh',
        scrollCollapse: true,
        paging:         false,
        cache: true,
        columns: [
            {
                "data": "a.ARTNR"
            },
            {
                "data": "ak.ARTKAT"
            },
            {
                "data": "a.ARTBEZ"
            },
            {
                "data": "a.ARTMAß"
            }
        ],
        select: "single",
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor }
            ,{ extend: 'edit',   editor: editor }
        ]
    } );
} );

}(jQuery));

On debbuging the data-Header seems correct:

data[row_5760][a][ARTNR]:-2
data[row_5760][a][FK_STG_TAB_ARTKAT]:23
data[row_5760][a][ARTBEZ]:HTV - Einweg
data[row_5760][a][ARTMAß]:0x0

But on the debugSql-array on Preview Page doesn't start an update:
(see attachment) [2]query: SELECT a.PK_ARTIKEL_ID as "a.PK_ARTIKEL_ID", a.ARTNR as "a.ARTNR", a.FK_STG_TAB_ARTKAT as "a.FK_STG_TAB_ARTKAT", a.ARTBEZ as "a.ARTBEZ", a.ARTMAß as "a.ARTMAß", ak.ARTKAT as "ak.ARTKAT" FROM STG_TAB_ARTIKEL a LEFT JOIN STG_TAB_ARTIKELKATEGORIE ak ON ak.ARTKATNR = a.FK_STG_TAB_ARTKAT WHERE a.PK_ARTIKEL_ID = :where_0

Don't know why it isn't working, i have another table w/o the leftJoin() param which is working perfectly.

Looking forward to any help!
Thanks in advance

Br Toni

Hi, i would like to ask a simple question.

How can i disable Editor Dependent to be fired when the editor form is created.
I mean,
{event : change}

Cause i have a select box in the form which fills another field upon change.

can u please help me this problem.
i have a template, but if i use datatable is not working, in other template work. js problem.
thanks

Hello, jscript noob here.

I've been trying to use Datatables and I've run across an issue where changing the class of the table doesn't seem to do anything.

I have an aspx page calling a method that gets the data from SQL, data shows correctly, references to jquery and datatables js look fine, css seem to be used but I don't get the hover and one in everyline with a different background colour.

Any idea of what it could be?

Worth noting that I'm on IE9 and can't seem to be able to use firefox/chrome so I can't check if it's because of that.

Thanks in advance for any clue.

Hello guys

I just tried out the button plugin, but when i use the print button print preview only shows 1/1 page, tho there should be more pages.
(only some of the rows comes on)

Hello, I need to edit single row in my datatables. Because I'm woring on ready project, and i can't edit it to much, i need a way to edit only one row. Is there any way to do this?

Hello!
I have some problem with plugin rowReorder. It's not working.
What needs to be done?
Example

I'm trying to use HTML5 data-sort attribute on a table that's rendered from PHP, after hours of debugging i've found the culprit it's the "columns: {}" option i have on my datatables instance, however i need that for my inline editor, my code looks something like this

`
$(document).ready(function() {

    var dtable = $('.data.table').DataTable({
      columns: <?php echo $tableColumns; ?>,
      columnDefs: [
        {targets: 'no-sort', orderable: false}
      ],
      order: [],
      responsive: true,
      keys: {
          columns: ':not(.no-inline-edit)',
          editor:  editor,
          keys: [ 9 ]
      }
    });

    var editor = new $.fn.dataTable.Editor({
      ajax: function(method, url, data, onSuccess, onError) {

        var formData = {};
        formData['inlineAjax'] = 1;
        formData['tableName'] = '<?php echo htmlencode($tableName) ?>';
        $.each(data['data'], function(index, value) {
          formData['recordNum'] = index;
          $.each(value, function(i, v) {
            formData['fieldName'] = i;
            formData['value'] = v;
          });
        });

        var edfields = <?php echo $editorColumns; ?>;
        var edrow = {};
        $.each($("tr#"+formData['recordNum']+" td"), function(index, value) {
          edrow[edfields[index]['name']] = $(value).html();
        });
        formData['row'] = edrow;

        $.ajax({
          'type': 'POST',
          'url': "<?php echo $_SERVER['REQUEST_URI']; ?>",
          'data': formData,
          'dataType': 'json',
          'cache': false,
          success: function(json) {
            onSuccess(json);
          },
          error: function (xhr, error, thrown) {
            onError(xhr, error, thrown);
          }
        });

      },
      table: '.data.table',
      fields: <?php echo $editorColumns; ?>,
      formOptions: {
          inline: {
              onBlur: 'submit'
          }
      }
    });

    dtable.on('key-focus', function(e, datatable, cell) {

      $(document).on('focus', '.data.table > tbody > tr > td.focus', function(e) {
        var cellVal = $('.data.table .focus').data('value');
        $('.data.table .focus').find('input').val(cellVal);
      });

      if($(datatable.cell(cell.index()).nodes()).data('inlinetype') == "bubble") {
        editor.bubble(cell.index());
      } else {
        editor.inline(cell.index());
      }

    });

`

if i comment the "columns:{}" in my datatables instance then the sort works fine, but the inline editor does not work anymore, is there way to make it work ?

Thanks,
Claudiu

Hi,
I have added many buttons to my html page,but pdf button is not considering filters applied to data table.It just showing all the data in no formatted manner as well as printing all the entries from individual column checkbox,not able to understand generated data.Suggest code for formatted and filtered data.I have attached image that showing current scenario.Thanks.

Is there a way to subscribe to the Blog? There is some exciting stuff there and I missed it!

Mick

Hi,
Here is the example: https://jsfiddle.net/4aLmbgwg/4/

Why is this horizontal scroll bar coming out, even if there's no scrolling configured, and no scrolling to do, anyway... ?

Thanks,
Marco

The columns.editField does not behave correctly. Its value should be compared to the names of the fields, like it says in the documentation.

The values this option can take are defined by the field names that are used for the Editor form (fields.name). Any field name defined in the Editor instance can be used as a value here.

This is not how it is implemented! Instead of the field names, the value is compared to the value of fields.data.

The reason why it still works 9 out of 10 times is because fields.data is set to fields.name if not specified.

By default, if not given in the initialisation of the field, it is automatically set to match the value of the fields.name property. This is by far the most common use case - as it helps keep things simple, but it is possible with this option to perform complex data transformations if needed.

The case when it breaks is when you set fields.data to something special, like a function.

// in DataTable options
columns: [
  {
    name: "first_name",
    data: function ( data, type, set ) {
        if ( type === 'set' ) {
            data.name = set;
        }
        return data.name.split(' ')[0];
    }
    editField: "first_name"
  }
]

// In Editor options
fields: [
  {
    name: "first_name",
    data: function ( data, type, set ) {
        if ( type === 'set' ) {
            data.name = set;
        }
        return data.name.split(' ')[0];
    },
    label: "First name:"
  }
]

Here, the first_name is a computed field/column. I expect this to work because the column has an editField that references an existing field name. However, this code throws an exception somewhere inside the __dtFieldsFromId function.

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

In this example https://jsfiddle.net/4aLmbgwg/8/

there are two examples, it's the same structure repeated twice, a datatables tale with scrollY put into a boostrap "collapse" panel.
each has its button to hide/show, but the first is generated already in the "open" state while the second is generated "closed"

but the first behaves well even closing and reopening it, while the second, after "opening" has headers completely wrong...

apart that, also columns widths seem to work well only in the first... anyway they are different in both cases...

Can anyone shade some light, explain how to fix this?

Thanks, Marco

I'm new with webpack and i'm trying to move my existing project to webpack enviroment, i managed to get everything to work beside the Datatable.
The Datatable object is working fine besides the export buttons.

I'm working with webpack version 1.14.0 and Datatable version 1.10.13.
I have installed modules: datatables, datatables.net, datatables.net-bs, datatables.net-buttons, datatables.net-dt.

I tryed the following steps from this issue:
https://datatables.net/forums/discussion/32542/datatables-and-webpack

1. I tryed to use the same js files that i'm using on my original project but that didnt work.

2. I have followed swinc solution as mentioned by this link:
   https://gist.github.com/swemaniac/2fbe5d6d5e425b7c046168b6d6e74e95
   I added the next loader to my loaders in the config file:
   {test: /datatables\.net.*/, loader: 'imports?define=>false'}

I have added the folowing lines on my main script:

import 'datatables.net';
import dt from 'datatables.net-bs';
dt(window, $);

That solution didnt work and output this error message even though i'm using jQuery:
Uncaught TypeError: Cannot set property '$' of undefined

3/
I have followed swinc solution as mentioned by this linke:
stackoverflow.com/questions/29302742/is-there-a-way-to-disable-amdplugin

I installed imports-loader and add to my loaders in the config file:
{ test: /myjsfile.js/, loader: 'imports?define=>false'}

That selution didnt work too.

Can someone know how to load Datatable with full export button plugin, or can tell me what i'm doing wrong.

Hi! I'm running into an issue where I'm sending down an error message in the fieldErrors array in json to a datetime field, but the only text displaying in the editor-datetime-error div is 'Error'.

It's finding the correct field and setting an error, but the message doesn't seem to be inserted. Any ideas on what I might be doing wrong?