hi, i imported excel table with filters but filters dont work on the table once imported to the site. any suggestions please?
I am not a coder. thanks. kevin.

I saw that some people tried to select child rows, but I was wondering if there is a way to adjust the current selection method for select rows on the table to also only allow the user to select one child row. In other words, the user can only select one row at a time including child rows.

For example, I have 20000 record in the database. I only want to load 50 at at time. But I want to set the datatable total count to 20000 instead of 50. So I can use pagination to go to the second page to load another 50.
Reason for it is if I load 20,000 at the time, the database will timeout.

I would like to default a datetime in a form to the current time, without allowing the user to edit it when creating a new record. The current time appears to come up as the default without my doing setting the def, but the input field is editable by the user. I would like to be able to capture the current time without allowing the user to change it, or requiring the user to confirm the current time

Is this possible?

The field definition for this field is:

        fields: [
            {
                label: "tickettime:",
                name: "tickettime",
                type: "datetime",
//              def: "return new Date();",
                format: "YYYY-MM-DD HH:mm:ss"
            },
               ]

Thanks,
Tom

Scenario:
Sample taken from the datatable.net example section whose markup has about 70 rows, so not pretty much.

Issue:
Desktop: It takes up to two seconds, from the time the initial table is seen and until it is fully rendered.
On mobile: It can take up to 8 seconds until the table is rendered, but usually takes 6s. During this time I cannot do anything on the page, the ui is frozen.

What could this be? This only happens on the datatable page nowhere else.
I found a 5 year old question on SO which describes the issue:
stackoverflow.com/q/7630780/2581562

2 seconds on desktop is already unacceptable, but 8 seconds is ....

So there is no ajax or whatever involved, the data is static HTML.

In options like columDefs, the targets contains the column number. This is very unhandy when inserting a column. It means that we then have to change all the targets. A lot of work, especially when there are many columns.

Why not give the columns an alias so that we can refer to them like this: "targets: ['id', 'name']". Or even the name used in columns.data could be used to refer to. This way, we can insert or remove columns wherever we want without the hassle of changing the targets all the time.

Hi

I have created a table with 5 columns. I use:

var t = $('#tblvia').DataTable();
        t.row.add( [
            row[0],
            row[1],
            row[2],
            row[3],
            row[4]
        ] ).draw(false);

Which adds the new row perfectly.

I want to be able to utilise the features from Editor for inline editing the content of this table. The table is dynamic and not pulled from a data source.

I have setup my table and also setup the Editor as follows:

editor = new $.fn.dataTable.Editor( {
        table: "#tblvia",
        idSrc:  "id",
        fields: [ {
                label: "Postal Name:",
                name: "postal_name"
            }, {
                label: "Address 1:",
                name: "address1"
            }, {
                label: "Address 2:",
                name: "address2"
            }, {
                label: "Town:",
                name: "town"
            }, {
                label: "Postcode:",
                name: "postcode"
            }
        ]
    } );

    $('#tblvia').DataTable({
        columns: [
            {name: "postal_name"},
            {name: "address1"},
            {name: "address2"},
            {name: "town"},
            {name: "postcode"}
        ],
        "createdRow": function( row, data, dataIndex ) {
            $(row).attr('id', dataIndex);
          }
    });

But I keep getting "Unable to find row identifier" error.

Can someone please shed some light on this.

Thank you.

I have JSON formatted similar to the JSON below.

{
   "Tiger Nixon": {
      "Position": "System Architect",
      "Office": "Edinburgh",
      "Age": 61,
      "Start date": "2011/04/25",
      "Salary": "$3,120"
   },
   "Garrett Winters": {
      "Position": "Director",
      "Office": "Edinburgh",
      "Age": 63,
      "Start date": "2011/07/25",
      "Salary": "$5,300"
   }.
}

I want to make the key containing the name (ex. "Tiger Nixon" and "Garrett Winters" as column 1, then from there on use the values associated with that key as the values for the rest of the columns in that row.

I have played around with the column option but I can't think of how this would be possible.

Is the only way to do this to loop through my object and set it to an array?

I write with server side but it doesn't work. please advises.

`$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#users tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

// DataTable
var table = $('#users').DataTable({
        "columns": [
            {"data": "time on"},
            {"data": "time off"},
            {"data": "status"}
        ],
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: 'demo2.php',
            type: 'POST'
        }
    });

// Apply the search
table.columns().every( function () {
    var that = this;
     $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

} );`

Hello, everyone ?

I found something strange in my work.

Let's see the picture.

This is Chrome
http://i.imgur.com/A8NSw18.png

This is IE11
http://i.imgur.com/DYN7u2l.png

"Chrome" has "Scroll" and "Header" size is right

But

"IE11" does not have "Scroll" and "Header" size does not

I will also show the js script source.

////////////////////////////////////////////////////////////////////////////
$("#masterTable").dataTable({
"autoWidth": true,
"autoHeight": true,
"destroy": true,
"data": data,
"scrollX" : true,
"scrollY" : "70%",
"scrollCollapse" : false,
"paging" : true,
"pagingType": "simple_numbers",
"info" : false,
"searching" : false,
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"deferRender": true,
"lengthMenu": [[10, 20, 30], [10, 20, 30]],
"columnDefs" : [
{"orderable" : true, "targets" : 0 },
{"orderable" : false, "targets" : 1 },
{"orderable" : true, "targets" : 2 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 3 },
{"orderable" : true, "targets" : 4 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 5 },
{"orderable" : true, "targets" : 6 },
{"orderable" : true, "targets" : 7 },
{"orderable" : true, "targets" : 8 },
{"orderable" : true, "targets" : 9 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 10 },
{"orderable" : false, "targets" : 11},
{"orderable" : true, "targets" : 12 ,"orderDataType": "dom-text", type: 'string' },
{"orderable" : true, "targets" : 13 },
{"orderable" : true, "targets" : 14 },
{"orderable" : true, "targets" : 15 },
{"orderable" : true, "targets" : 16 }
],
"columns" : [
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_l"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c"},
{ className : "grid_data_c", render:$.fn.dataTable.render.moment("YYYYMMDDHHmmss", "YYYY-MM-DD HH:mm:ss")},
{ className : "grid_data_c"},
{ className : "grid_data_c"}
],
"language" : {
"emptyTable" : "데이터가 존재하지 않습니다.",
"lengthMenu": " 최대 표시 줄 MENU ",
"paginate": {
"first": "맨처음",
"last": "마지막",
"next": "다음",
"previous": "이전"
}
},
"initComplete" : function(settings, json) {
},
"footerCallback": function () {
var api = this.api();
if(api.data().length > 0) {
$(api.column(0).footer()).html(api.data().length.money() + " 건");
}
}
});
////////////////////////////////////////////////////////////////////////////

What did I miss?

thank you for reading ^____^

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.

Hello,

Does anyone know of a function I can use to close the details of all open rows in a table? Kind of like this, but for every open details: https://datatables.net/examples/api/row_details.html

Hi, I am using DataTables and DataTables Editor in a large project of mine and was curious if there was a way to remove the non json characters such as tabs, etc from the form fields before submitting to the server. Users of my project are placing them into the text boxes and I would like to remove them on the client side.

What is the fastest way to implement this for many tables and editors? I have checked the reference and cannot seem to find anything to solve this. Is it built in?

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

I need to insert data from an import file into the datatable. Sometimes it is only a data row but also several. When I inserted the data (Serverside) I see the inserted data only when I reload the whole page. How can I instruct Datatables to display the record immediately if it is in the visible range. The import always returns the record as JSON, but the datatable does not respond. I have read that it should go through AJAX load, however, I have no idea how. With the documentation I was also not smarter. How can I instruct datatables to display the record or reloading the part of the table without having to reload the whole page.

Andreas

Hello,
I use the row grouping datatable plugin. On the following script i have a background color for each new rows of the group
according to the name of the group category ( test, test1, test2 )

That s not what i want, I would like to add a background color directly on the row of the group.
ex : when the group name "test2" is deteted, i would like to add a background color on it.

Have you got an idea?
thank you

 api.column(3, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                            '<tr><td class="espace" colspan="5"></td></tr>',
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );

                    last = group;
                }

            } );

  "createdRow": function ( row, data, dataIndex )   {
            if ( data[3] == "test" ) {
                $(row).addClass('red');}

            if ( data[3] == "Test1" ) {
                $(row).addClass('yellow');}

            if ( data[3] == "Test2" ) {
                $(row).addClass('grey');}

I'm trying to subscribe to the 'change' event for some input radio I have in a Datatable, but the event never fires.
I've added the class='radioEvent' to each radio element to try to select it even via class name but it doesn't work too.
I've tried these code but none of these works:

$("#tbApps").on('change','.radioEvent',, function(){ alert('click!!');});

$('#tbApps').on('click','input[type=radio]','td',function () { alert('click')});

$('#tbApps tbody').on('click','input','td',function () { alert('click')});

Hi, everyone.
Im trying to use a checkbox set to indicate in the editor form a set of optios which can be individually check or unchecked. Everything is ok if I define the options in the checkbox field definition. However, if I try to create the options dinamically, by using the preOpen event, all the options are shown unchecked.... just the first time I open the editor. The second, third etc times, the options are shown properly cheked or unchecked, depending on the data base contents. It only fails the first time I open the editor.

The field is defined like this:

{
    label: 'Especialidades:',
    name: 'id_especialidades[]',
    type: 'checkbox',
    fieldInfo: 'Selecciona las especialidades'
},

The options are loaded dinamically by the preOpen event, like this:

objetoEditor.on('preOpen', function(e, mode, action){
    if (action == "remove") return;
    $.ajax({
        url:"leer_especialidades_editor_08.php",
        async:false,
        dataType: "JSON",
        complete:function(datosRecibidos) {
            listaDeEspecialidades = datosRecibidos.responseText;
        }
    });
    var matrizDeEspecialidades = JSON.parse(listaDeEspecialidades);
    objetoEditor.field('id_especialidades[]').update(matrizDeEspecialidades);
});

Ant the field in the Datatables is defined like this:

{"data": 'id_especialidades[]'}

When I open the editor, the preOpen event gives the right JSON response from the first time, like this:

0:{label: "Bootstrap", value: "9"}
1:{label: "CSS 3", value: "3"}
2:{label: "HTML 5", value: "1"}
3:{label: "JavaScript 6", value: "2"}
4:{label: "jQuery", value: "7"}
5:{label: "jQuery Mobile", value: "10"}
6:{label: "jQueryUI", value: "8"}
7:{label: "MySQL", value: "6"}
8:{label: "PHP", value: "5"}
9:{label: "SCSS", value: "4"}

The first time I try to edit a user profiles, they appear all the checkboxes unchecked. If I close the form and reopen it, the checkboxes appear properly checked or unchecked, on the real sate in the MySQL table.

Why does it not work just the first time?

Thanks everyone.

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:

```php
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?

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