Any reason why i can't use a Select2 in Editor to multi-select?

Is there an example anywhere?

Mick

Hi Support,
I have slno unique key auto increment mysql table field.
I want to update row using editor using slno but do not want to display slno in table . can i use idSRC for this purpose or any other way to do this.

Regards.
Sunil

Hi!
I use datatables 1.10, but php is still 5.3.

I get this error:
<b>Warning</b>: explode() expects parameter 2 to be string, array given in <b>/Applications/MAMP/htdocs/amministrazione/Datatables/php/Vendor/htmLawed/htmLawed.php</b> on line <b>181</b><br />

I think it's something wrong with my php version as here:

https://datatables.net//forums/discussion/comment/85059/#Comment_85059

I can't update it. How can I do?

Thanks
Pat

Hi. Firstly thanks for your work on this tool it's been very helpful.

I have an issue with my datatable where checked checkboxes are not keeping their 'checked' state when I switch between pages. I have read other posts on the forum which describe the same issue, and found that if serverSide is false that the boxes should remain ticked.

I'd appreciate it if someone could take a look at my code and make a suggestion as to how to fix it.

$(document).ready(function () {
    var userGroupData = @Html.Raw(Model.UserGroupJson);
    var table = $('#usergroupTarget').DataTable({
        "data": userGroupData,
        "columns": [
            {"title": "Usergroup Name"},
            {"title": "Target"}
        ],
        "serverSide": false,

        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var tblTds = $('>td', nRow);
            tblTds[0].innerHTML = aData[1];

            $(nRow).attr("id", 'tblRow_' + aData[0]);
            tblTds[1].innerHTML = '<td><input type="checkbox" name="publishedstatus" value="' + aData[0] + '" id="' + aData[0] + '" onclick="Member(' + aData[0] + ')" /><label for="' + aData[0] + '"></label>></td>';
        }
    })
});

Cheers!

The date picker on IE and Firefox does not take into consideration the "scrollTop" value. This causes the datepicker to go to above the field when it does not need to be.

This can be fixed by doing the following:

Change _position function in DateTime:

        var scrollTop = $('body').scrollTop();

To:

        var scrollTop = $('body').scrollTop();
        scrollTop = scrollTop > 0 ? scrollTop : $('html').scrollTop();

Can we please fix this on the next version?

Hello,

I just want to know to invoke on click functionality of datatables button to my bootstrap buttons , without initializing datatables buttons.?

on click of bootstrap button Export or print of Datatables should work.

I am defining like this
datatableID.buttons('.buttons-print').trigger();

But for this to work there should be datatables buttons initialised which i dont want.

Can anyone help my out regarding this. ?

Thanks

Ok so basically after a table has been generated/rendered through the api, I have a function that executes. The function takes fills a value in each cell of a column with the value to the cell to the left of it divided by the value of the column left to its grand total. I am not even sure I am doing the right approach for this in regards to data tables, but it works. What does not work is when I export the data table, the column is simply blank. I am assuming it is because I am not using the data tables API itself to have this column's content generated. However I am just at a loss currently on how I would achieve this since the grand total is actually generated in the footerCallback. I need the footerCallback to be completed before I can fill the values in that column of course. Any help or tips to get me on the right path would be appreciated. Also big kudos to the developers of data tables. I have been using it about a week now and it is great!

My function that executes after data tables ajax call and rendering has been completed:

$("#sct_size > tbody > tr > td:nth-child(5)").each(function () {
    var x = $("#sct_size_wrapper > div > div > div > table > tfoot > tr > td:eq(3)").html();
    x = x.replace(/\,/g, '');
    var y = $(this).prev().html();
    y = y.replace(/\,/g, '');
    var result = parseFloat((y / x) * 100);
    result = result.toFixed(1);
    result.toString();
    $(this).html(result + "%");
})

What works best with and/or does data tables prefer when it comes to formulas, done by client sided (js) or server sided (c#, sql, etc)? For example a column which content is generated by a formula which includes other columns or even the sum of another?

I recently purchased DataTables Editor, created a new consolidated Datatables download including the Editor, and replaced the consolidated datatables.min.js file and verified that the Editor is included.

I have the following includes:

<link rel="stylesheet" type="text/css" href="../../../distLibs/css/datatables.min.css">

<script type="text/javascript" language="javascript" src="../../../distLibs/lib/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/jquery-migrate-3.0.0.min.js"></script>
<script type="text/javascript" language="javascript" src='../../../distLibs/lib/moment-with-locales.min.js'></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/tinymce.min.js"></script>

<!-- includes all the plugins I need (DataTables 1.10.13, AutoFill 2.1.3, Buttons 1.2.4, Print view 1.2.4, Editor 1.6.1, Responsive 2.1.0, Scroller 1.4.2, Select 1.2.0) -->
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/datatables.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/datetime.js"></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/editor.tinymce.js"></script>

And my Editor field definitions are:

       editor = new $.fn.dataTable.Editor({
            ajax: "OTCalMaint.php",
            table: "#cc-list",
            idSrc: "RID",
            fields: [
               {label: "Title:",
                    name: "title"
               },

               {label: "Start:",
                    name: "start",
                    type: "datetime",
                    def: function () { return new Date(); },
                    format: 'dddd, MMMM Do, YYYY h:mm A'
               },

               {label: "End:",
                    name: "end",
                    type: "datetime",
                    def: function () { return new Date(); },
                    format: 'dddd, MMMM Do, YYYY h:mm A'
               },

               {label: "Description:",
                   name: "description",
                   type: "tinymce"
               }

            ]
        });

The bubble appears and all the fields appear except only the title appears for "Description".

There are no errors in the Web Console.

If I comment out one or the other of the tinymce includes, I do get and error.

I have Block Popups turned off in FireFox.

Quill performs as expected but I want to use Tinymce

Any thoughts?

Regards,
Jim

Hi there,
I have just started getting into Data Tables and am struggling with trying to remove a checkbox from the header cell of the column. I am using checkboxes to help the user see when a column is selected but I can't figure out how to remove the one that is inserted automatically in the header of the column that is making it look a bit ugly. I am probably missing something really obvious.

Here is the Javascript I am using.
Any help is appreciated.
Thanks.

$('#grAddUserTable').DataTable({

                columnDefs: [ {

                        orderable: false,
                        className: 'select-checkbox',
                        targets:   0
                    } ],
                    select: {
                        style:    'os',
                        selector: 'td:first-child'
                    },
                    order: [[ 1, 'asc' ]],

                pageLength: 5,
                responsive: true

            });

My DataTable shows all rows- not sure what I am doing wrong. I would appreciate any assistance!

Debug available here: http://debug.datatables.net/arecok

The simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example - Ajax sourced data</title>

<link href="jslib/DataTables-1.10.13/media/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="jslib/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="jslib/DataTables-1.10.13/media/js/jquery.dataTables.min.js"></script>

</head>
<body>
  <table id="test" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>rowID</th>
        <th>Name</th>
        <th>userName</th>
        <th>Start UTC</th>
        <th>Project</th>
        <th>Location</th>
        <th>Certification</th>
      </tr>
    </thead>
  </table>

<script>

$('#test').DataTable( {

    "ajax": "./data.txt",

    "columns": [
            { title: "rowID", visible: false, searchable: false },
            { title: "Name" },
            { title: "userName", visible: false, searchable: false },
            { title: "Start UTC" },
            { title: "Project" },
            { title: "Location" },
            { title: "Certification" }
        ],

    "createdRow": function( row, data, dataIndex ) {
        if ( data[6] == "INVALID" ) {
            $(row).addClass( 'bg-danger' );
            $('td:eq(4)', row).html('<button class="btn btn-primary btn-sm">VALIDATE</button>');
        } else {
            $(row).addClass( 'bg-success' );
        }
     },

     "processing": true,
     "serverSide": true,

});

$('#test tbody').on( 'click', 'button', function () {
    var data = $("#test").DataTable().row( $(this).parents('tr') ).data();
    alert( data[0] );
});

</script>

</body>
</html>

Data file:

{
    "draw": 1,
    "recordsTotal": 82,
    "recordsFiltered": 82,
    "data": [
        [12, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [13, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [14, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [15, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [16, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [17, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [18, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [19, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Office", "VALID"],
        [20, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [21, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [22, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Office", "VALID"],
        [23, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [24, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [25, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [26, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [27, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [28, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [29, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [30, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [31, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [32, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [33, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [34, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [41, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [42, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [43, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [44, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [45, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [47, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [48, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [49, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [50, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [52, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [53, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [54, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [55, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [56, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [57, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [58, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [59, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [60, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [61, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [62, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [63, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [64, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [65, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [66, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [67, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [68, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [69, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [70, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [71, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [72, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [73, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [74, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [75, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [76, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "q", "Home", "VALID"],
        [97, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [98, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [99, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [105, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Library", "VALID"],
        [106, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Library", "VALID"],
        [107, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [108, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [109, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [110, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [111, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [112, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [113, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Library", "VALID"],
        [114, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Other", "VALID"],
        [115, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [116, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [118, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [119, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [120, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Office", "VALID"],
        [128, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [135, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"],
        [136, "Stacy Mader", "abc123", "2017-02-09 11:22:07.0", "Java", "Home", "VALID"]
    ]
}

I have been following this:

https://editor.datatables.net/manual/php/mjoin

And my join is working correctly:

->join(
                Mjoin::inst( 'data_sources' )//table to link to
                ->link('widgets.id','data_source_widget.widget_id' ) //left table id, name in link table
                ->link('data_sources.id','data_source_widget.data_source_id' ) //right table id, name in link table

                ->order('data_sources.description asc')// order of joined data - optional
                ->fields(
                    Field::inst( 'id' ) //first field read from joined table
                    ->options( 'data_sources', 'id', 'description' )
                        ->validator( 'Validate::notEmpty' ),
                    Field::inst( 'description' ) //second field read from joined table
                )
            )

I have a widgets table and a data_sources table which are linked by a data_source_widget table.

I am working on the Widgets editor page. I have the an array of data_sourecs being displayed in my Datatable.

Now I want the Editor to display a select which lists the description field from the data_sources table and allows the user to be able to select multiple data sources.

I guess I need to add something like this (this is for a simple select I am doing, using a foreign key):

Field::inst("widgets.widget_type_id") //foreign key in this table
                ->options('widget_types','id','description') //linked table, key (id) , value (text to display)
                ->validator( 'Validate::dbValues' ),
                //this is needed to display it joined table.field_name
                Field::inst('widget_types.description')->validator('Validate::unique'),

Is there an example of this anywhere?

Mick

It seems like this should be available, but it's not. I should be able to directly update the message after the table is build with a simple jQuery reference and a val() call. I've wasted hours trying to get this to work with little success. Also... the accordion needs to have a pair of consistent, simple commands to set opened and closed, like "Open" and "Close". Currently, you need to set active to false to close and 0 to open, with 0 acting like a toggle not an open. This is just nuts.

We are using commas for decimal. If we export numbers with commas, for example 1,59 the number exports as 159.

The example works but it also format columns with strings. How can we format only columns with numbers?

{
            extend: 'excel',
            exportOptions: {
                columns: ':visible',
                format: {
                    body: function(data, row, column, node) {
                        return data.replace(',', '.');
                    }

                }
            }
        }

Allan,

I have created a column which is the sum of 2 cells in the row.
When I total (footerCallback) the columns, the original 2 columns total just fine, but the rendered summed columns fail to total.
I tried to remove currency rendering from all my data, but that had no effect.

Any help would be greatly appreciated, as I have spent all day on this, and fail to understand why it does not work.

Javascript:

        var myTable = $("#myTable").DataTable( {
            dom: "t",
            "rowCallback": function( row, data, index )
            {
                if ( data.myDbTable.id == 6 )
                {
                    $("td", row).closest("tr").removeClass("even");
                    $("td", row).closest("tr").removeClass("odd");
                    $("td", row).closest("tr").css("background-color","blue");
                    $("td", row).closest("tr").css("color","white");
                    $("td", row).closest("tr").css("font-weight","bold");
                    //$("td", row).eq(1).css("font-weight","bold");
                }
            },
            "ordering": false,
            "serverSide": false,
            "paging": false,
            ajax:   {
                "url":  "myAjax.php",
                "type": "POST",
                data: function(d) {
                    d.param1="' . $param1 .'";
                    d.param2="'.$param2.'";
                    d.param3="'.$param3.'";
                }
            },
            columns: [
                { data: "myDbTable.id",     "sClass": "binCentered" },
                { data: "myDbTable.field1", "sClass": "binCentered" },
                { data: "myDbTable.field2", "sClass": "binCentered",
                    render: $.fn.dataTable.render.number( ",", ".", 0, "$" ) },
                { data: "myDbTable.field3", "sClass": "binCentered" ,
                    render: $.fn.dataTable.render.number( ",", ".", 0, "$" )},
                { data: "myDbTable.field4", "sClass": "binCentered" },
                { data:  null, "sClass": "binCentered", render: function (data, type, row)
                    {
                        var numFormat = $.fn.dataTable.render.number( ",", ".", 0, "$" ).display;
                        var total = parseInt(data.myDbTable.field2) + parseInt(data.myDbTable.field3);
                        return numFormat(total);
                    }
                },

                { data:  null, "sClass": "binCentered", render: function (data, type, row)
                    {
                        var numFormat = $.fn.dataTable.render.number( ",", ".", 0, "$" ).display;
                        var total = parseInt(data.myDbTable.field2) + parseInt(data.myDbTable.field3);
                        return numFormat(total);
                    }
                },
                { data: "myDbTable.field4", "sClass": "binCentered" },
                { data: "myDbTable.field5", "sClass": "binCentered" }
            ],
            order: [[0, "asc"]], // sort by hidden id column
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": false  // Hide my ID column
                }
                ],
            buttons: [
                "excelHtml5"
            ],

            "footerCallback": function ( row, data, start, end, display )
            {
                var api = this.api(), data;
                var numFormat = $.fn.dataTable.render.number( ",", ".", 0, "$" ).display;

                // 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 Column 2 over all pages
                total = api
                    .column( 2 )
                    .data()
                    .reduce( function (a, b)
                    {
                        return intVal(a) + intVal(b);
                    }, 0 );


                // Update footer
                $( api.column( 2 ).footer() ).html
                (
                    numFormat(total)
                );

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


                // Update footer
                $( api.column( 3 ).footer() ).html
                (
                    numFormat(total)
                );

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


                // Update footer
                $( api.column( 4 ).footer() ).html
                (
                    numFormat(total)
                );

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


                // Update footer
                $( api.column( 5 ).footer() ).html
                (
                    numFormat(total)
                );

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

                // Update footer
                $( api.column( 6 ).footer() ).html
                (
                    numFormat(total)
                );
            }
    });

html

<table id="myTable" class="cell-border table-bordered"  cellspacing="0" width="100%" margin-left=auto margin-right=auto>
        <thead>
            <tr style="height: 10px;">
                <th>ID</th>
                <th></th>
                <th>field2</th>
                <th>field3</th>
                <th>field4</th>
                <th>field5</th>
                <th>field6</th>
                <th>field7</th>
                <th>field8</th>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th>field2</th>
                <th>field3</th>
                <th>field4</th>
                <th>field5</th>
                <th>field6</th>
                <th>field7</th>
                <th>field8</th>
            </tr>
        </tfoot>
    </table>

Hi

I am getting this error on the production server but not on my development laptop

Fatal error: Call to private method DataTables\Editor::_ssp_field() from context '' in /var/www/vhosts
/bookt.lanzarote1.com/httpdocs/inc/dt/php/lib/Editor/Editor.php on line 1444

Here is the debug for the development wamp platform which works fine - 3 tables each filtered / searched from select fields in form.

http://debug.datatables.net/amufuc

The server envronment is LAMP

Regards Mark

I'm pondering whether it is possible to replace the Select and KeyTable plugins with a unified code model that takes advantage of sequential focus navigation (tabindex navigation).

Here is a quick demo: https://jsfiddle.net/sliekens/5wvhr7o8/

The demo has a tabindex attribute on things that I want to be able to select, and some styling to make focused rows and cells stand out.

Before I go on and spend too much time on this, has anyone tried to go down this road before?

I used the download builder to include the Bootstrap theme in Datatables (and left all the other options at the default on the download builder page). However, when I include the resulting css/js my table doesn't seem to look right. Can anyone take a look at these screenshots of my table and tell me if this is the intended look of a Datatables table using the Bootstrap theme and maybe I am just doing something wrong with my styling? This is what the table looks like with the Bootstrap theme included:

I'm fairly new to front-end development and maybe this is the way it's supposed to look and I just haven't fully styled it correctly myself?

When I include just the normal datatables js and css my table looks much nicer and better aligned to me:

Some extra details that may or may not be relevent: First, sorry for not including a jsfiddle. I was unsure how to set one up due to the complex way I am setting up the page. Essentially, I am using jquery's load function to grab the html code from a server to set up a basic table with no content. Then I use datatable's ajax/server-side functionality to populate the table with data. And also yes, I remembered to include the bootstrap "table" class in table html element.

Oh and here is how I am initializing Datatables:

"processing": true, "serverSide": true, "ajax": "output/ss_results/", "oLanguage": {"sSearch": "Search within results:"}, "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ]

Thanks for any help.

Hey everyone and thanks in advance for any help you can provide.

I'm using DataTables with typescript and require. I've run into an issue where the ordering isn't working. When I take it out of typescript and require and just use it with normal JS, the ordering works fine with identical code. Any idea what could be causing this?

This is the typing file Im using
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery.datatables/index.d.ts

And here is the code

requirejs(["/Weblink2/Scripts/plugins/datatables.js"], function (datatables) {
    $.extend(true, $.fn.dataTable.defaults, {
        "paging": false,
        "ordering": false,
        "info": false,
        "searching": false,
        "processing": true,
        "serverSide": true,
        language: {
            processing: loadingMarkup,
        }
    });

    $('#EinTable').DataTable({
        "ajax": "/weblink2/MaintenanceSupport/MyAccount/ManageProvidersDataTables?idType=E",
        "columns": [
            {
                "title": "Proivider Name", data: function (data) {
                    if (data.Entitytype == null) {
                        return "<strong>" + data.ProviderName + "</strong>"
                    }
                    else {
                        return data.ProviderName
                    }
                }
            },
            { "title": "ID", "data": "Id" },
            {
                "title": "Entity Type", data: function (data) {
                    if (data.Entitytype == 2) {
                        return "<select id='Entitytype' name='Entitytype' class='form-control'>\
                            <option value='2' selected='selected'>Group</option>\
                            <option value='1' >Individual</option>\
                        </select>"
                    }

                    else if (data.Entitytype == 0 || data.Entitytype == 1) {
                        return "<select id='Entitytype' name='Entitytype' class='form-control'>\
                            <option value='2' >Group</option>\
                            <option value='1' selected='selected' >Individual</option>\
                        </select>"
                    }
                    else {
                        return "<select id='Entitytype' name='Entitytype' class='form-control input-validation-error'>\
                            <option value='' selected='selected' ></option>\
                            <option value='2' >Group</option>\
                            <option value='1'  >Individual</option>\
                        </select>" }
                }
            },
            {
                "title": "Active Status", data: function (data) {
                    if (data.Active == 1) {
                        return "<select id='Active' name='Active' class='form-control'>\
                            <option value='1' selected='selected'>Active</option>\
                            <option value='2' >Inactive</option>\
                        </select>"
                    }
                    else {
                        return "<select id='Active' name='Active' class='form-control'>\
                            <option value='1' >Active</option>\
                            <option value='2' selected='selected' >Inactive</option>\
                        </select>"
                    }
                }
            }
        ],
        "columnDefs": [
            { "width": "40%", "targets": 0 },
            { "width": "20%", "targets": 1 },
            { "width": "20%", "targets": 2 },
            { "width": "20%", "targets": 3 }
        ],
        "order": [0, "asc"]
    });

Hello,
Usually, certain data is not distributed in one table, but in several tables. As an example here times an order:

Tables:
- Order
-> Order ID
-> Customer ID
-> Payment method
...
- Customer
-> Customer ID
-> First name
-> Surname
...

I would like to take the table order as a representation table. In the Order table, for example, is a field with the customer ID. In the display and in the search, however, the customer ID is not to be displayed or searched, but by the first name and last name, which is specified in the customer table.

I have only found examples that relate to one table only. I have indeed found a way to get the presentation:

    array(  'db'        => 'rgadrid',
            'dt'        => 3,
            'formatter' =>  function( $d, $row ) {
                            $sql2   =   'SELECT     `ID`,
                                                    `rg_firma`,
                                                    `rg_titel`,
                                                    `rg_vname`,
                                                    `rg_nname`
                                        FROM        `sd_adre_rg`
                                        WHERE `ID` = '.$d.';';
                            if (!$result = $mysqli->query($sql2)) {}
                            $row2       =   $result->fetch_assoc();
                            if ($row2['rg_firma'] <> '')
                                {   $str2   =   $row2['rg_firma'];   }
                            else
                                {   if($row2['rg_titel'] <> '')
                                        {   $str2   =  $row2['rg_titel'].' '.$row2['rg_vname'].' '.$row2['rg_nname'];   }
                                    else
                                        {   $str2   =  $row2['rg_vname'].' '.$row2['rg_nname'];   }
                                }
                            return $str2;
                            }

    )

But the search and sorting does not work so, because these access to the source data.
Can you give me an approach, how do I change the search and sorting?