Hi,

Why the latest 0 of 2 decimal value does not display?
50.50 will be displayed as 50.5

I'm filling the table using Ajax.
var dataSet = [
[ "Mydata", 52215, "95%", 50.50, -4.3, 7.2, "02" ],
]

Hi
I will appreciate if you can help me with the problem, I am having right now with my datatables
Scenario:
I have 4 bootstrap tabs
Inside each tab there is a datatable and editor
All the tables are sharing the same table “products”, but the difference is that I have 4 different controllers: controller for each table in the 4 tabs where I am using “When” to filter and fetch the data based on the status value [sample controller is following - line 20 is where I change the proce value]

Tab1 datatable get data from products table when status=0
Tab2 datatatble get data from products table when status =1
Tab3 datatatble get data from products table when status =S
Tab4 datatatble get data from products table when status =Q

I have editor submit button above each datatable

in tab1: when click the submit then status should change 0 to 1
in tab2: when click the submit then status should change 1 to S
in tab3: when click the submit then status should change S to Q
in tab4: when click the submit then status should change A to C

If I have only one datatable in tab1 and no other tables exist, then the submit button works just fine
The problem happened when I add datatable in tab2; then the submit button will work in tab2 but no in tab 1.
If I add datatable in tab3 then submit button works in tab3 but not in tab 2 and so on

sample controller is here:

                    public class ProductsController : ApiController
                        {
                            [Route("api/products")]
                            [HttpGet]
                            [HttpPost]
                            public IHttpActionResult Products()
                            {
                                var request = HttpContext.Current.Request;
                                var settings = Properties.Settings.Default;

                                using (var db = new Database(settings.DbType, settings.DbConnection))
                                {
                                    var response = new Editor(db, "Product")
                                       .Field(new Field("id").Validator(Validation.NotEmpty()))
                                       .Field(new Field("ProductID").Validator(Validation.NotEmpty()))
                                       .Field(new Field("ProdDesc").Validator(Validation.NotEmpty()))
                                       .Field(new Field("Origin").Validator(Validation.NotEmpty()))
                                       .Field(new Field("proce").Validator(Validation.NotEmpty()))

                                       .Where("proce", "0") //get the unprocessed Prod only

                                       .MJoin(new MJoin("ProductPack")

                                       .Link("Product.ProductID", "Pack.PrdID")
                                       .Field(new Field("Pack.id"))
                                       .Field(new Field("Pack.ProdID"))
                                       .Field(new Field("Pack.Cat"))
                                       .Field(new Field("Pack.Cap"))                    )
                                       .Process(request)
                                       .Data();
                                    return Json(response);              
                                }
                            }
                        }

I am not sure where is error is: But I believe it is because I am using the same table. Or I may be mistaken

Thanks in advance

I have used this code just fine with dataTable that did not have a SearchPane. I am getting an error trying to use it on a dataTable that has one.

    $("#varType").change(function () {
        typeID = $("#varType option:selected").attr('value');
        InvoiceVarianceTable.ajax.url('api/BillingGenerated_Variances?typeID=' + typeID).load();
        InvoiceVarianceTable.searchPanes.rebuild();        
    });

The datatable loads fine initially. I tried it with both a default of zero and one (the two options that typeID can be. When I change the value of the select box, I get the error:

 Cannot read property 'searchPanes' of null

I tried adding the searchPanes.rebuild() but that didn't seem to help.

in this example https://datatables.net/examples/advanced_init/column_render.html
the first column has both name and age ; can we support sorting with name and also sorting with (age) ?
can you please help how can we do that in a single column? i don't want to separate the columns.
i want to keep both name and age in a single column, but have a provision to sort them too.

Hi, I'm working on a ASTNET Core (Razor Page) project and I'm using altEditor datatable to display and add/edit/delete data. Its working fine but I'd like to change to official editor.

The datatables doesn't connect directly to a database but via REST Api. Currently I use Ajax to call page handler of Razor page which then will call a REST Api from other server. All data return in JSON format.

I've tried changing my current code to below code but It doesn't work.

$(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: {
                    create: {
                        type: 'POST',
                        url: '/manage/student?handler=addStudent',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        }
                    },
                    edit: {
                        type: 'PUT',
                        url: '/manage/student?handler=updateStudent',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        }
                    },                
                    remove: {
                        type: 'DELETE',
                        url: '/manage/student',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        }
                    }
                },
                table: "#example",
                fields: [
                    {
                        label: "Id:",
                        name: "id"
                    },
                    {
                        label: "Name:",
                        name: "name"
                    },
                    {
                        label: 'Nationality:',
                        data: 'nationality.name',
                        type: 'select',
                        options: getStudentNationality()
                    },
                    {
                        title: 'Profile Image',
                        data: 'profileImage',
                        type: 'file'
                    }
                ]
            });
            $('#example').DataTable({
                dom: "Bfrtip",
                ajax: {
                    'type': 'GET',
                    'url': '/manage/student?handler=displaystudents'
                },
                columns: [                   
                    { data: "id" },
                    { data: "name" },
                    { data: "nationality.name" },
                    { data: "profileImage" },                                  
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });

i did all steps described in
https://datatables.net/forums/discussion/62113/how-to-reverse-excel-pdf-columns-order-to-rtl#latest
but not worked for me as i attashed to you

i did it as discribed

columnDefs: [
{
targets: '_all',
render: function(data, type, row) {
if (type === 'PDF') {
return data.split(' ').reverse().join(' ');
}
return data;
}
}

but not worked for me

Almost at the very bottom of this page:
https: //datatables.net/extensions/searchbuilder/customConditions

It states:
"An example with this custom condition can be found here."

The link is broken.

Hello,
I want to pass a default value to a Datatable editor field, from a javascript function that generates a random code.

function makeid(length) {
   var result           = '';
   var characters       = 'abcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;

}

I don't know how the function is referenced in the edit form field.

            {
                label: "code:",
                name:  "sml_maps.code",
                default: ''
            },

Thanks

My html code

<!DOCTYPE html>

<head>
    <title>Datatables</title>
</head>
<html>

<body>
    <table id="user_data" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Email</th>
                <th>No.Hp</th>
                <th>Status</th>
            </tr>
        </thead>

        <tbody id="table-body-pengguna">

        </tbody>
    </table>
</body>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-storage.js"></script>


<script src="dt2.js"></script>

</html>  

My JS code

var firebaseConfig = {
    apiKey: "AIzaSyAdWq4-ZE4Yv87w_AEyy5b5JwkW9A8iL3U",
    authDomain: "contact-form-38b0b.firebaseapp.com",
    databaseURL: "https://contact-form-38b0b-default-rtdb.firebaseio.com",
    projectId: "contact-form-38b0b",
    storageBucket: "contact-form-38b0b.appspot.com",
    messagingSenderId: "748179068137",
    appId: "1:748179068137:web:2a3ad3ed4d8a07ac990c78",
    measurementId: "G-HC8E0ED0TD"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

var rootRef = firebase.database().ref().child("AdminID");

rootRef.on("child_added", snap => {
    var AdminID = snap.child("AdminID").val();
    var AdminName = snap.child("AdminName").val();
    var AdminPassword = snap.child("AdminPassword").val();
    var AdminPhone = snap.child("AdminPhone").val();

    $("#table-body-pengguna").append("<tr><td>" + AdminID + "</td><td>" + AdminName +
        "</td><td>" + AdminPassword + "</td><td>" + AdminPhone + "</td></tr>");
})

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

http://live.datatables.net/tabodawo/1/edit?html,css,js,console,output

I am trying to build a table from external api to get exchange rates.

Can't see wht the cause is.

Hi,

When i am exporting to excel the $ symbol showing at right side. can u please help me to resolve this.

for example I want to create a testcase which is a clone of this -- https://datatables.net/examples/advanced_init/complex_header.html

i want to add individual column search for this example
and also add individual column hide/show toggle for this example.
do you already have an example code for this scenario?

thanks,
Uma-

I have a view that has a table with a lot of columns so I'm using the scrollX feature. In this view I can dynamically add rows. Typically the data flow is the user will enter data and go to the far right of the screen before adding a new row. So when the new row is added the scroll position should go back to the far left. I've tried destroying and recreating the table before adding the row but it always removes the dynamically added row. How can I reset the scrollX position of the datatable?

We have a lot of datetimes in our datatables formatted like this: yyyy-MM-dd HH:mm:ss (2021-03-25 09:30:25)

When we export to Excel these datetimes are not recognized as valid datetimes in Excel, but if we just copy/paste the date into Excel it works just fine.

If I remove the time-part of the date and export from Datatables, Excel recognizes the date just fine (2021-03-25), but as soon as the time is there it fails.

Is there some configuration that needs to be done to get this working or ?

Hope somebody can help

Best regards
Bo

Hi,

Is it possible to edit the joined tables (joined using Mjoin)? So that if the key in the main table is changed , the change reflects in the foreign key of linked child table

I have two tables : Main table: Agreemnet table and joined table: terms_type. one agreement can have multiple terms , so the relation is 1 to many, as depicted in the picture:

I have joined the using Mjoin and the code on serverside looks like this:

->join(
        Mjoin::inst( 'crg_terms_type' )
            ->link( 'agreement.agreement_id', 'crg_terms_type.agreement_id_fk' )
            ->fields(
                Field::inst( 'agreement_id_fk' )
                    ->validator( 'Validate::required' )
                    ->options( Options::inst()
                        ->table( 'crg_terms_type' )
                        ->value( 'agreement_id_fk' )
                        ->label( 'type' )
                    ),
                Field::inst( 'type' )
            )
    )

Here is the data returned from the server:

{
    "data": [{
        "DT_RowId": "row_123",
        "agreement": {
            "agreement_id": 123,
            "company": "",
            "supplier": "BC Foods",
            "brand_type": "",
            "ah_company": "D",
            "ah_supplier": "J",
            "start_date": "2020-01-01",
            "end_date": "2020-12-31",
            "income": 0,
            "comments": "",
            "status": "PENDING",
            "print": "",
            "supplier_ref": "BC2020",
            "terms": ""
        },
        "crg_terms_type": [{
            "agreement_id_fk": 123,
            "type": "ORD"
        }]
    }, {
        "DT_RowId": "row_456",
        "agreement": {
            "agreement_id": 456,
            "company": "",
            "supplier": "AB Foods",
            "brand_type": "",
            "ah_company": " P",
            "ah_supplier": "J",
            "start_date": "2020-01-01",
            "end_date": "2020-12-31",
            "income": 0,
            "comments": "",
            "status": "PENDING",
            "print": "",
            "supplier_ref": "AB2020",
            "terms": ""
        },
        "crg_terms_type": [{
            "agreement_id_fk": 456,
            "type": "ORD"
        }, {
            "agreement_id_fk": 456,
            "type": "Target-1"
        }, {
            "agreement_id_fk": 456,
            "type": "Target-2"
        }, {
            "agreement_id_fk": 456,
            "type": "Target-3"
        }, {
            "agreement_id_fk": 456,
            "type": "Target-4"
        }, {
            "agreement_id_fk": 456,
            "type": "Target-5"
        }]
    }, {
        "DT_RowId": "row_789",
        "agreement": {
            "agreement_id": 789,
            "company": "",
            "supplier": "BC Foods",
            "brand_type": "",
            "ah_company": "P",
            "ah_supplier": "J",
            "start_date": "2021-01-01",
            "end_date": "2021-12-31",
            "income": 0,
            "comments": "",
            "status": "PENDING",
            "print": "",
            "supplier_ref": "BC2021",
            "terms": ""
        },
        "crg_terms_type": [{
            "agreement_id_fk": 789,
            "type": "ORD"
        }, {
            "agreement_id_fk": 789,
            "type": "Target-1"
        }, {
            "agreement_id_fk": 789,
            "type": "Target-2"
        }]
    }],
    "options": {
        "crg_terms_type[].agreement_id_fk": [{
            "label": "ORD",
            "value": 789
        }, {
            "label": "ORD",
            "value": 456
        }, {
            "label": "ORD",
            "value": 123
        }, {
            "label": "Target-1",
            "value": 456
        }, {
            "label": "Target-1",
            "value": 789
        }, {
            "label": "Target-2",
            "value": 456
        }, {
            "label": "Target-2",
            "value": 789
        }, {
            "label": "Target-3",
            "value": 456
        }, {
            "label": "Target-4",
            "value": 456
        }, {
            "label": "Target-5",
            "value": 456
        }]
    },
    "files": [],
    "searchPanes": {
        "options": []
    }
}

What I am trying to achieve here is that, if I edit the data in main table, fro exampe if I change the agreement_id in main table , the foreign key ** agreement_id_fk** should automatically change

Tried this on the on the client side in editor field:

    "fields": [
   {
                "label": "Agreement ID FK-child table",
                "name": "crg_terms_type[].agreement_id_fk"
            },

but it is not working

Thank you

I have a DataTable with multiple columns.
Some of them are hidden, as they contain translations for the data into different languages.
For every shown (visible) column there is an input to filter the table by a specific value.

The filter like this works perfectly fine, if the value is in the shown (visible) column:

$('input', this).on('keyup change clear', function() {
      if (table.column(10).search() !== this.value) {
           table.column(10).search(this.value).draw();
      }
});

Let's pretend that column 14 contains the translation of column 10 - but column 14 is not visible.
If the user is trying to filter with the input in column 10, I also want to search in column 14, since it contains the translation.
The following code doesnt work for me, since the searched value has to be in column 10 AND column 14.

$('input', this).on('keyup change clear', function() {
     if (table.column(10).search() !== this.value) {
          table.column(10).search(this.value).table.column(14).search(this.value).draw();
     }
});

Is there a way to display (draw) rows if the value searched in column 10 is either in column 10 OR column 14?

Link to test case:
I would link to my proper test case as I am trying to debug this issue, but I can't even get ColReorder to work in the JS Bin
http://live.datatables.net/goqivebu/1/edit
All I get is Script Error (Line: 0) When I include ColReorder, so I must be missing something?

Debugger code (debug.datatables.net):
The result from running the debugger is a 404 page, so I'm unsure what to do here.
https://debug.datatables.net/agarix

Error messages shown::
DataTables warning: table id=results_table - Requested unknown parameter 'undefined' for row 0, column 14. For more information about this error, please see http://datatables.net/tn/4

Description of problem:
Other than the above problems I am getting with the debugging tools above.

My issue is that after changing the way our data comes into datatables whenever a user moves a column using the ColReorder feature it throws the above message.

This code used to work and even when the error gets thrown the table still functions normally.
I would appreciate any ideas on what this issue might be and how it could be solved!
Thank you!

trying to make my site responsive.
so I need a "placeholder" on first col and here is my init object

var dtConfig = {
    dom:        "Bfrtip",
    responsive: true,
    ajax: {
        url: "listes/spip_approches/spip_approches.php",
        type: "POST",
        data: {
            "id_organisation": 7
        }
    },
    language: getLanguage(),
    serverSide: true,
    columns: [{
            data: null,
            defaultContent: '',
            className: 'control',
            orderable: false,
            searchable: false
        }, {
            "data": "id_approche",
            "visible": false /* */
        },
        {
            "data": "id_organisation",
            "visible": false /* */
        },
        {
            "data": "date_app",
            "className": "editable default",
            "render": "$.fn.dataTable.render.moment('D/MM/YYYY')",
            "width": "5em"
        },
        {
            "data": "type_app",
            "className": "editable default",
            "width": "8em"
        },
        {
            "data": "commentaire",
            "className": "editable default",
            "width": "100%"
        }
    ],
    buttons: [{
        extend: "create",
        editor: "editor"
    }, {
        extend: "edit",
        editor: "editor"
    }, {
        extend: "remove",
        editor: "editor"
    }, {
        extend: 'searchPanes',
        className: "btnPanes"
    }],
   
    select: false,

    "paging": false};

And I got the warning :
DataTables warning: table id=approches - Unknown field: (index 0)

I browse around and find I need to add

    orderable: false,
    searchable: false

but this didn't help.
Thanks for your help
Michel

I am trying to understand how to use the saveState method.
Righ now it is set on true, which means everything on the webpage will be saved. including the filter functions (it will only display the searched item and you can't undo that unless using $('table_Name').DataTable().state.clear();

with the stateSaveParams method you can specify which items you would like to save. The example is: data.search.search = " "; which works, but when I try customize something to my liking it doesn't work and I don't fully understand why.

I want to keep my iDisplayLength and the value upon refreshing. The rest should refresh upon reloading the page.
This is my current code:

$('#Container').DataTable({
                "scrollX": false,
                "iDisplayLength": 10,
                "aLengthMenu": [[10, 15, 20, 25, 50, -1], [10, 15, 20, 25, 50, "All"]],
                stateSave: true,
                stateSaveParams: function (settings, data) {
                    data.search.search = "", //Refreshes
                    this.api().columns([1, 3, 6, 13]) = " "; //
                    console.log(this.api().columns([1, 3, 6, 13])),
                    this.api().columns([1, 3, 6, 13]) = " ";
                },
            }).columns.adjust();
            $('#Container').DataTable().state.clear();
        });

i have select values on column 1, 3, 6 and 13 and I want those to be refreshed upon reloading the page.

I used the code from this discussion: https://datatables.net/forums/discussion/56816
I read up on the saveStateParms here: https://datatables.net/reference/option/stateSaveParams

I hope I formed my question correct. if I need to give any more information, feel free to ask.
Thank you in advance.