I'm a developer interested in using DataTables for a application I am developing. However, I am dealing with some very personal and potentially sensitive information and am concerned about any data I pass to DataTables. Does the plugin send and store data elsewhere other than my application?

$('#companyrolefeature_table').DataTable({
            "paging": true,
            "order": [[1, "asc"]],
            "columnDefs": [{ "orderable": false, "targets": [0] }],

            //Problems in IE
            "lengthChange": false,
            "dom": 't<"insertInput">lrip'
        });

When viewing this table in IE/Edge I get the following error:
"Assignment to read-only properties is not allowed in strict mode"

occurs in:

_fnFeatureHtmlLength( settings) {
div[0].style = 'color:black';
}

and

_fnFeatureHtmlPaginate( settings){
node.style = 'color:black';
}

According to the error it can be resolved by setting cssText, which I have tested and it works:
.style.cssText = 'color:black'; instead which is to the ECMAScript5 standard.

Is there a way for me to override these functions, as I would prefer not to alter datatables.js.

Hi,

If I have a DataTable in the page and I step over it with the debugger, as soon as it executes this line:

table = curr_element.DataTable(config);

you can see all the elements created and the table styled properly. However, If I add to the config object the following:

config.language = {
            url: language_file
};

then in the call to curr_element.DataTable(config) some styles are applied but not all, and not all the elements are created. For example, the #myId_length element is not yet created, so I can't do anything like adding the buttons where I want.

After a while, when the page completes loading, the default lenght, filter, and pagination elements are created and work fine, but they were not created when I needed to access them, just after DataTable creation

So it seems that you don't fully create the DataTable when loading to a language. Maybe you wait until the file is retrieved and finish the creation then.

When can I access the table elements safely when using a language.

Thank you

I am using Colvis. I have set the collectionLayout property to 'fixed three-column'. I use CSS to put a tick or a cross before my button text, to indicate whether the column is selected or not. Since the lastest version of Chrome has been released, the tick or cross does not show in anything but the first column. It does work in IE11, Edge, Firefox and Chrome v62.0.32.

Here is a screen shot of my problem:

This is the css

/* put a cross to show that a column is not visible */
a.dt-button.buttons-columnVisibility span.glyphicon:before {
    content:"\e014";
}

/* put a tick to show that a column is visible */
a.dt-button.buttons-columnVisibility.active:not(.disabled) span.glyphicon:before{
    content: "\e013";
}

This is the javascript:

    {
                extend: 'colvis',
                columns: ':not(.excluded-from-colvis)',
                className: 'btn btn-primary colvis-button',
                collectionLayout: 'fixed three-column',
                columnText: function ( dt, idx, title ) {
                    return '<span class="glyphicon"></span> ' + title;
                },
                postfixButtons: [{
                                     extend: 'colvisGroup',
                                     text: 'Show all columns',
                                     show: ':not(.excluded-from-colvis)'
                                 }]
        }

Hi,

Referring to:
https://editor.datatables.net/reference/field/text

The document suggests that input attributes are set with the attr object which expects key / value pairs. This works well for 'maxlength' and 'placeholder':

        fields: [
            {
                label: "test:",
                name: "test",
                type: "text",
                attr: {
                    maxlength: '5',
                    placeholder: 'test input',
                    required: ?????????????????
                }
            }
        ]

However attribute 'required' does not exist as an attribute/value pair in the same way. I want to achieve the following:

<input name="test" maxlength="5" placeholder="test input" required>

How should I set the attr object to achieve an input with 'required' as above?

Steve

I had to sum the values only if other values are the same.
I have a table like this

item_id       quantity

1                    10
2                      7
1                    12
3                      5
2                    11
1                      3

I had to sum the quantity with the same item_id
so: item_id (1) =sum(10, 12, 3)

First of all, it's possible using render?
Or i must use some Php function?

Thank a lot for any ideas

During a session with the datatable, allow a user to name and save the curent state of the table (search params,ordering etc).

These would be saved to a database. Each user would have their own list of saved states.

Later, the use could pick from a list of the saved states and restore it.

Has anyone done something like this? I imagine I would use the stateLoadCallback method to load from the database. Is this the best approach?

Thanks and Regards
Don

Hi,
I'm sorry but I don't understand how to make DataTable work correctly with Bootstrap 4.

I've used the download builder to get a bootstrap 4 package, without any other option than boostrap 4 checked.

I use bootstrap-4.0.0-beta.3

The package includes 4 standard files at the root of the archive :
- datatables.css (+datatables.min.css)
- datatables.js (+datatables.min.js)

If I use those files, the plugin works, but the border-spacing is separated (I want it collapsed). I did not find a way to make it collapsed (I don't want to add a "style" attribute on my table).
See : https://i.imgur.com/H0EmNSb.png
I thought I was not using the right correct files for bootstrap.

In the archive, there is also a "DataTables-1.10.16" folder which includes some folders (css, js, images) in which I found :
- dataTables.bootstrap4.js
- dataTables.bootstrap4.css

I've tried to use those two files instead of the original files : now my borders are collapsed, but DataTables does not work anymore : I get a "$().DataTable is not a function" error in the javascript console.

Could you tell me what i'm doing wrong ?

Thanks !

Plastic injection mold for Home appliancation.Plastic injection mold for Auto parts. url:http://www.yangfanmold.com

Customer plastic injection mold for TV product url:http://www.yangfanmold.com

I have a table with currency. I want to be able to sort it. The data has the euro sign symbol. I tried this:

<html>
<head>
    <script type="text/javascript"  src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript"  src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src="js/currency.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
 var money_table=$('#moneys').DataTable();
 });
</script>

<table id="moneys">
<thead>
        <th>id</th>
        <th>chines</th>
</thead>
<tbody>
    <tr><td>0</td> <td>1.35 &euro;</td></tr>
    <tr><td>1</td> <td>15.65 &euro;</td></tr>
    <tr>    <td>2</td> <td>8.15 &euro;</td></tr>
    <tr>    <td>3</td> <td>1.00 &euro;</td></tr>
    <tr>    <td>4</td> <td>0.3 &euro;</td></tr>
</tbody>
</table>

</body>
</html>

But does not work. Any hint?

I'd like to be able to find the type set via options within the API but can't seem to find a way of retrieving it?

I saw a reference to attr: { id: 'buttonID' } but it doesn't seem to work. Thanks. -Gabe

Hi,

I am able to set classes for columns successfully in DataTables using things like:
'columnDefs': [
{
className: 'dt-center',
targets: [0,1,2]
}]

Since I use the DataTables everywhere I pass this in to my 'implementTable' routine as an object -- that also works. I have also discovered that I can have more than one class (i.e. className: 'dt-center font-larger')

However what I really want to do is to have one class for two columns and another for the others. I also need to pass that in as an object.

Here is how I pass one of them:

var cellClassesObj = new Array();
var cellClassObj = new Object();
cellClassObj.className = 'btnTop';
cellClassObj.targets = [0];
cellClassesObj.push(cellClassObj);
tableObj.cellClassesObj = cellClassesObj;
implementTable(tableObj);

The problem happens when I push more than one cellClassObj onto the array. Is there another way to do it?

Thanks,

-Gabe

Want to center Table Name. But Table options don't give me anything. Did I miss something?

I am automatically hiding field 5, 7 when I click to enable both the search field does not come together how to solve this? thank you

My Code

$(document).ready(function() {


      var advance = $('#advanced-table').DataTable( {
      dom: 'Blfrtip',
           columnDefs: [
            {
                targets: 1,
                className: 'noVis',
            },
            {

                "targets": [ 5 ],
                "visible": false,
                "searchable": true,
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true,
            }

        ],
    buttons: {
        name: 'primary',

        buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'  ]
    },




          //"language": {
                //"url": "http://cdn.datatables.net/plug-ins/1.10.13/i18n/Portuguese-Brasil.json"
           // }


    } );


$(document).ready(function() {
    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();

        // table
        var table = $('#advanced-table').dataTable();

        // column
        var ColNum = $(this).attr('data-column');

        // Define
        var bVis = table.fnSettings().aoColumns[ColNum].bVisible;

        // Toggle
        table.fnSetColumnVis(ColNum, bVis ? false : true);

    });
});



// Setup - add a text input to each footer cell
    $('#advanced-table tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
    } );
      // Apply the search
    advance.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );



    } );

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hello,

Using 1.10.16, I am calling ajax.reload() to refresh my table and stateSave set to true. Everything gets saved when reload is called except the pagination resets back to the first page. Is there an option to set to preserve the table page on reload?

Hello, I have a test case.
http://www.ryanlangille.com/templates2.html
Debug code: elonex

I am trying to assign users to different templates. I have a Persons table, a Roles table, and a PersonRoles table. The idea is that I can assign different PersonRoleIDs to a TemplateID in the PersonRoleTemplates table when creating or updating a record in the Templates2 page. This is because someone might have an Admin role, but for only 1 template. While somebody else may have both an Admin role and an Analyst role but for only 2 templates.

The issue is that this code below works correctly when creating a record on the templates2 page. The page is also reading the json data correctly when you select a row and click edit. However, when you click update, the 'users' that have been assigned does not update correctly, in fact they get deleted, but for only 1 of the 2 mjoins. This is true if you edit who is assigned, and this is true when you hit update without changing who is assigned.

I cannot figure out the issue because the create works like a charm. I could use some help. I need to mention that the table 'PersonInfo' is a stored query. This is because I need to pull in more columns on the mjoin so that I can display info related to the person in the subtable (drill down) + and - icons, and so I can use the Name of the person in the checkboxes on the form.

The purpose of the $q->where( 'RoleID', '1', '=' ); and $q->where( 'RoleID', '2', '=' ); in pi1 and pi2 is so that the query being used in the mjoin only contains the correct RoleID, in this case, RoleID 1 = Admin, RoleID2 = Analyst.

PS - 'Users' come from the same table. They have different PersonRoleIDs in the case of 1 person have more than 1 role assigned to them. So I am performing more than 1 mjoin on the same table, in this case, a query with additional information. The completed project will have at least 4 mjoins on the same users query, all with alias pi1, pi2, pi3, and pi4.

    /* Formatting function for row details - modify as you need */
function format ( d ) {

    var mystring = ""

    for (var i=0; i < d.pi1.length; i++){
    var mystring = mystring + '<td>'+d.pi1[i].FName+'</td>'
    };

    var mystring2 = ""

    for (var i=0; i < d.pi2.length; i++){
    var mystring = mystring + '<td>'+d.pi2[i].FName+'</td>'
    };

    // `d` is the original data object for the row
    return '<table id="testtable" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Report Desc:</td>'+
            '<td>'+d.Templates.ReportDesc+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Admin</td>'+
             mystring +
             '<td>Analyst</td>'+
             mystring2 +
        '</tr>'+
    '</table>';

}


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

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../../php/Scripts/templates2.php",
        table: "#example",
        fields: [ {
                label: "Report Name:",
                name: "Templates.ReportName"
            }, {
                label: "Report Title:",
                name: "Templates.ReportTitle"
            }, {
                label: "Report Desc:",
                name: "Templates.ReportDesc"
            }, {
                label: "Frequency:",
                name: "Templates.FrequencyID",
                type: "select"
            }, {
                label: "DueDate Report Inbound:",
                name: "Templates.NextDueDatePackager"
            }, {
                label: "DueDate Report Outbound:",
                name: "Templates.NextDueDateRecipient"
            },{
                "label": "Admin:",
                "name": "pi1[].PersonRoleID",
                "type": "checkbox"
            },{
                "label": "Analyst:",
                "name": "pi2[].PersonRoleID",
                "type": "checkbox"
            }
        ]
    } );

 var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "../../php/Scripts/templates2.php",
            type: 'POST'
        },
        columns: [
        {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { data: "Templates.ReportName"},
            { data: "Templates.ReportTitle" },
            { data: "Frequencies.Frequency" },
            { data: "Templates.NextDueDatePackager" },
            { data: "Templates.NextDueDateRecipient" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );


 // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.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');
        }
    });

    });

<?php

// DataTables PHP library
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,
    DataTables\Editor\ValidateOptions;


/*
 * Example PHP implementation used for the joinLinkTable.html example
 */

Editor::inst( $db, 'Templates', 'TemplateID' )
    ->field(
        Field::inst( 'Templates.ReportName' ),
        Field::inst( 'Templates.ReportTitle' ),
        Field::inst( 'Templates.ReportDesc' ),
        Field::inst( 'Templates.FrequencyID' )
            ->options( Options::inst()
                ->table( 'Frequencies' )
                ->value( 'FrequencyID' )
                ->label( 'Frequency' )
            ),
        Field::inst( 'Frequencies.Frequency' ),
        Field::inst( 'Templates.NextDueDatePackager' ),
        Field::inst( 'Templates.NextDueDateRecipient' )
    )
->leftJoin( 'Frequencies', 'Frequencies.FrequencyID', '=', 'Templates.FrequencyID' )
 ->Join(
        Mjoin::inst( 'PersonInfo' )
        ->where( function ($q) {
                            $q->where( 'RoleID', '1', '=' );
                        })
            ->name( 'pi1' )
            ->link( 'Templates.TemplateID', 'PersonRoleTemplates.TemplateID' )
            ->link( 'PersonInfo.PersonRoleID', 'PersonRoleTemplates.PersonRoleID' )
            ->order( 'PersonID asc' )
            ->fields(
                Field::inst( 'PersonRoleID' )
                    ->validator( Validate::required() )
                    ->options( Options::inst()
                        ->table( 'PersonInfo' )
                        ->value( 'PersonRoleID' )
                        ->label( 'FName' )
                        ->where( function ($r) {
                            $r->where( 'RoleID', '1', '=' );
                        })
                    ),
                Field::inst( 'PersonID' ),
                Field::inst( 'FName' ),
                Field::inst( 'RoleID' )
                    )
        )
 ->Join(
        Mjoin::inst( 'PersonInfo' )
                ->where( function ($q) {
                            $q->where( 'RoleID', '2', '=' );
                        })
            ->name( 'pi2' )
            ->link( 'Templates.TemplateID', 'PersonRoleTemplates.TemplateID' )
            ->link( 'PersonInfo.PersonRoleID', 'PersonRoleTemplates.PersonRoleID' )
            ->order( 'PersonID asc' )
            ->fields(
                Field::inst( 'PersonRoleID' )
                    ->validator( Validate::required() )
                    ->options( Options::inst()
                        ->table( 'PersonInfo' )
                        ->value( 'PersonRoleID' )
                        ->label( 'FName' )
                        ->where( function ($r) {
                            $r->where( 'RoleID', '2', '=' );
                        })
                    ),
                Field::inst( 'PersonID' ),
                Field::inst( 'FName' ),
                Field::inst( 'RoleID')
                    )
        )
    ->process($_POST)
    ->json();

I'm using the Buttons extension, Print option and I only want the table footer <tfoot> to print on the last page. I tried to just put it in a row <tr><td> at the end of the table, but that doesn't work when I use a custom sort. Any ideas on this?