Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML


Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog

Channel Description:

Recent Discussions — DataTables forums

older | 1 | .... | 2267 | 2268 | (Page 2269) | 2270 | 2271 | .... | 2326 | newer

    0 0

    Hi all,

    I've just started to work with this magnificent tool and I'm foolin' around. So, if there's already a solution or any use-case technique, I'm not just aware of.

    That being said, here is my problem:

    I have an empty container like this:

    <div id="container"></div>

    and I'm modifying its contents on a tab control's onChangeTab event:

                            // table container
                            var tableContainer = $("#container");
                            // clear all contents
                            if (data.length) {
                                // templates
                                var content =
                                    "<div id=\"block_~I~\">" +
                                        "<input type=\"hidden\" id=\"~I~_ID\" value=\"~ID~\" /> " +
                                        "<table id=\"table_~I~\" class=\"striped responsive-table dataTable\">" +
                                            "<thead>" +
                                                "<tr>" +
                                                    "<th>Name</th>" +
                                                "</tr>" +
                                            "</thead>" +
                                        "</table>" +
                                $.each(data, function(idx, val) {
                                        // create content
                                        var newContent = content.replaceAll("~ID~", val).replaceAll("~I~", idx);
                                        // initialize data table
                                        var dataTableDom = "table_~I~".replaceAll("~I~", idx);
                                        var dtColumns = new Array();
                                            "data": "Name"
                                            domObjectName: dataTableDom,
                                            columns: dtColumns,
                                            // other stuff

    ConfigureDataTable method is nothing much but an encapsulator of a generic table generator with simply

    return domObj.DataTable({
    // with defaults extended

    and the extended defaults are

            destroy: true,
            processing: false,
            autoWidth: false,
            serverSide: true

    and the replaceAllis just a simple recursive stringReplace code.

    Now, my problem is, after modifying the container div element as above and creating the table, the result is like this:

    As you can see length elements of table are not present. Dev tools dont show any scripting error. When I call the creator method on document.ready or equvalient, there is no problem, the table renders perfectly.

    What I am missing? How do I solve this?

    Thanks in advance.


    0 0

    I've downloaded the evaluation version of the editor. When specifying the DbType as 'sqllite', and trying to run it, the exception I get is 'Unable to find the requested .Net Framework Data Provider'

    DbConnection=Data Source=C://DMZ//CZ.db;Version=3;

    <remove invariant="System.Data.SQLite.EF6" />
    <add name="SQLite Data Provider (Entity Framework 6)" invariant="System.Data.SQLite.EF6" description=".NET Framework Data Provider for SQLite (Entity Framework 6)" type="System.Data.SQLite.EF6.SQLiteProviderFactory, System.Data.SQLite.EF6" />
    <remove invariant="System.Data.SQLite" />
    <add name="SQLite Data Provider" invariant="System.Data.SQLite" description=".NET Framework Data Provider for SQLite" type="System.Data.SQLite.SQLiteFactory, System.Data.SQLite" />

    I've installed following Nuget packages:

    Note. I've got existing sqlite connection in my app, which is working and i'm using. Event if I pass the existing connection to the edit new Database(settings.DbType, existingConnection), I do get the same exception.

    I've also run the Sqlite script against my DB for the sample, and my existing DB, already has tables I'm trying to connect to.

    Both sample application and existing application gives same exception:
    Unable to find the requested .Net Framework Data Provider

    Any help or directions would be welcomed.

    0 0
  • 11/27/18--01:06: colReorder via button
  • I have the following onclick:

    $('.dropdown-view').on('click', function(e) {
        let order = [7,6,5,4,3,2,1,0];

    This works great and reorders the columns from back to front.
    I can also jumble them up:

        let order = [5,6,7,2,3,4,1,0];

    However, I can never get them back to the original order. This does not work:

        let order = [0,1,2,3,4,5,6,7];

    I can't see an error in the log. The table just doesn't reorder.

    0 0
  • 11/14/18--03:22: Server-side checkbox filter
  • Hello, this is my table with 2 checkboxes:

    I'm trying to filter data in my table with these two checkboxes (will be more checkboxes and date-picker in the future). I'm using the php server_processing php and ssp.class.php. I found some comments about custom filtering in the ssp.class.php file, but there is no example how to do it and there is no example also in the DataTables forum or internet.

    I know that I need to modify the WHERE conditoin in the ssp.class.php when checkbox is selected, but I'm completely lost how to do it. Thank you in advance.

    0 0

    I have a hidden datafield like group_id, which contains null, 1 or 2
    Therefor I would like to have a dropdown menue for an additional search. if "all" is selected the hidden field will be ignored. If "1" is selected, all data with "1" in the hidden field will be considered. The same with "2"

    Can somebody tell me, how to get it working ?

    0 0


    If I am using a 3rd party plugin to translate my page, how can I get the datatable to export the data in the chosen languag e.g If i translate my page to German and I export the datatable to excel, it's exported in English (I would like to have it in the chosen language "German").


    0 0

    When inserting a time string, for example: "96:43" [h:m]
    and sort the column I get something like this:

    which doesn't make any sense - seems like it's sorting by first number and not by "time".

    How do I sort my time outputs with datatables?

    0 0

    I have the following code and I need to search/filter the rows of my table so that it displays only rows with data in the relevant column that is greater than 0:

    var xTable = $('#WTM_LOG').DataTable();
        var checkbox = $("#checkB"); () {
            if (":checked")) {

    So in the search([INSERT HERE]) I want to add a range rather than a number. Is this possible? The only other option I see is using this:

    Having spent hours trying to understand the code in the above link, I don't entirely get it, and wouldn't know how to adapt my code to it.
    Specifically, I don't get this:

    .val(), 10 );

    at the end of this line:

    var min = parseInt( $('#min').val(), 10 );

    and this:

    || 0;

    at the end of this line:

    var age = parseFloat( data[3] ) || 0;

    Well, i know it means 'or zero' but not sure why. Either way, I can't get my code to do what I want it to.

    0 0

    I've recently converted my table to server side processing with a php script and it's working well, including column sorting.

    However, I have a column with specially formatted data, so I've tried to implement rendering/orthogonal data but the column sorting has stopped working. I've been trying several things - I've gotten the sort to work when I point the datatable to an ajax txt file on the server, but as soon as I change to serverside/processing and point the datatable to a php script then the sort stops working.

    I've looked at the $_GET server variables and it appears that the order data being sent is the same, but I'm guessing I need to update my php script sort function to use the sort data rather the display data. It'd be helpful if someone who has done this could confirm...and if there is some documentation somewhere I'd appreciate seeing it.

    0 0

    Hi all together,

    I combined the custom rendering and the Data source change event examples from this page:

    Instead of average salary in the custom rendering example, I used the sum() function to have the sum of salary for each city.

    I now need to have a sort option which will sort the groups using the summed up value. When I now click on the last column the single elements in each city will be ordered, but I need the whole groups ordered using the summed up values.

    So, e.g. London is the city with the highest over all salaries, the "London group" should be up, next the second highest salary group and so on.

    This is my current script:

    Hope you can help me out here! I tried to built an example in jsfiddle, but I wasn't able to get the custom rendering example running on jsfiddle. If you have a jsfiddle link with this example running I am happy to add all further details of my code.

    Thank you so much!

    0 0

    Hi all

    Is it possible to have different orderData for ASC and DESC on the same target?
    For example:
    { "orderSequence": [ "asc" ], "targets": [ 1 ], orderData: [ 6, 1 ]}
    { "orderSequence": [ "desc" ], "targets": [ 1 ], orderData: [ 7, 1 ]}

    ASC on Column 1 => orderData 6,1
    DESC on Column 1 => orderData 7,1


    0 0
  • 11/27/18--07:59: trying to use
  • seems to need 1.10.19 from the example provided.
    but the download configuraiton only lets one get datatables 1.10.18

    how does one get a downloaded min script from the site that has the current datatables version?

    0 0

    Hi y'all,

    I'm trying to add a new row to my table with and
    Unfortunately I get the error request:
    "DataTables warning: table id=customer - Requested unknown parameter 'crapper_customer_intranet.kundenr' for row 10, column 0."


             $('#customer').DataTable( {
                dom: "Blfrtip",
                ajax: {
                    url: '../backend/getCustomerBack.php',
                    type: 'POST',
                    dataSrc: 'data'
                serverSide: true,
                columns: [
                        data: "crapper_customer_intranet.kundenr",
                        data: "crapper_customer_intranet.navn",
                        data: "crapper_customer_intranet.cvrnr",
                select: true,

    The following code is invoked when clicked on a button. I've tried several solutions from various sources who've had the same problems, but still doesn't seem to work.

                                    var table = jQuery('#customer').DataTable();
                                    var dataTest1 = [{
                                    var dataTest2 = [['sveeaaa','asdasd.00','0132123']];

    I've got no idea what the hell I'm missing, and it's properly just a small error I'm missing....

    It gives the following error:
    "DataTables warning: table id=customer - Requested unknown parameter 'crapper_customer_intranet.kundenr' for row 10, column 0. For more information about this error, please see"

    I've noticed that the "row 10" is according to how many entries I've got in my table. If i change it to 50 or 100, it changes aswell..?

    Here's the console log if interested.

    Hope someone can help me out.

    Have a great day!

    0 0

    Hi all,

    I use below code to add an extra row with extra content.
    To load the extra content I use an ID (available in my data as "data[7]"). This row with [7] is the only hidden field.

    When I have my table with content and I click on the tr all works as expected.
    When I use the "search" text field all works as expected.

    When I use a <select> filter in my "thead" to shorten up the result, the filtering happens so all data (including data[7]) is available (using "$(document).on('change',...").
    If now I click any row, I get following error:
    "Uncaught TypeError: Cannot read property '7' of undefined"

    If I replace the "this" with a row number (like in var test) I do get the data as expected...

    Can anyone explain why the "this" in line 6 is suddenly not working anymore and hence resulting in an "undefined" value...

    I can also try to go to read out the row number clicked but as the tables can be sorted it does not always match the result...
    I hope somebody can help here.


    //Some more code
        var table = $('#product_data').DataTable();
        $('#product_data tbody').on('click', 'tr', function () {
    //Using 'this' results in undefined when using select filter
          var data = table.row( this ).data();
    var test = table.row( 2 ).data();
          var tr = $(this).closest('tr');
          var row = table.row(tr);
          if (row.child.isShown()) {
          else {
            //Show waiting animation when original row is clicked
            var check_tr = $(this).attr('role');
            if (check_tr == "row"){
              type: 'GET',
    //here I need the data
              url: "extradata.php?id="+data[7],
              success: function (response) {
                row.child( response ).show();
              error: function (xhr, ajaxOptions, thrownError) {
                row.child( 'Error loading content: ' + thrownError ).show();

    0 0
  • 11/27/18--09:01: Row count after sorting
  • after clicking header to sort by a column the number of rows displayed changes(increases). the number of entries count does not change.
    starts with 10 rows displayed. after sort is clicked it shows 14 or more rows.
    is this a know issue? does anyone have a resolution to reset number of rows after sort?

    0 0

    Dear comunity,

    after i tried the upload example with an additional upload-field, i have an issue in DataTables. The upload progress of both files works fine but after i refresh datatables page i got an issue in console that one of the document file_id's was unknown (uncaught exception: Unknown file id 21 in table files) so the view will return no data.

    What changes do I have to make to get both upload values ​​from the database? I can not use the multiple file upload because once an image and once a PDF must be uploaded. These values ​​must be displayed in separate columns.

    I think that there must be a change in Select statement because now, two values (files_id's) "image" and "document" ​​have to be fetched but i can't figure it out. :neutral:

    regards from germany,


    <table id="example" class="display" width="100%" cellspacing="0">
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Phone #</th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Phone #</th>


    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/upload.php",
            table: "#example",
            fields: [ {
                    label: "First name:",
                    name: "first_name"
                }, {
                    label: "Last name:",
                    name: "last_name"
                }, {
                    label: "Phone #:",
                    name: "phone"
                }, {
                    label: "City:",
                    name: "city"
                }, {
                    label: "Image:",
                    name: "image",
                    type: "upload",
                    display: function ( file_id ) {
                        return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                    clearText: "Clear",
                    noImageText: 'No image'
                    label: "Document:",
                    name: "document",
                    "type": "upload",
                    "clearText": "Clear",
                    "noImageText": 'no pdf'
        } );
        var table = $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "../php/upload.php",
            columns: [
                { data: "first_name" },
                { data: "last_name" },
                { data: "phone" },
                { data: "city" },
                    data: "image",
                    render: function ( file_id ) {
                        return file_id ?
                            '<img src="'+editor.file( 'files', file_id ).web_path+'"/>' :
                    defaultContent: "No image",
                    title: "Image"
                    data: "document",
                    render: function ( file_id ) {
                        return file_id ?
                            '<a href="'+editor.file( 'files', file_id ).web_path+'" target="_blank">PDF</a>' :
                    "defaultContent": "no pdf",
                    "title": "Document"
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
        } );
    } );


    // DataTables PHP library
    include( "../../php/DataTables.php" );
    // Alias Editor classes so they are easy to use
    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'users' )
            Field::inst( 'first_name' ),
            Field::inst( 'last_name' ),
            Field::inst( 'phone' ),
            Field::inst( 'city' ),
            Field::inst( 'image' )
                ->setFormatter( Format::ifEmpty( null ) )
                ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/image_upload/__ID__.__EXTN__' )
                    ->db( 'files', 'id', array(
                        'filename'    => Upload::DB_FILE_NAME,
                        'filesize'    => Upload::DB_FILE_SIZE,
                        'web_path'    => Upload::DB_WEB_PATH,
                        'system_path' => Upload::DB_SYSTEM_PATH
                    ) )
                    ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                    ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
            Field::inst( 'document' )
                ->setFormatter( Format::ifEmpty( null ) )
                ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/document_upload/__ID__.__EXTN__' )
                    ->db( 'files', 'id', array(
                        'filename'    => Upload::DB_FILE_NAME,
                        'filesize'    => Upload::DB_FILE_SIZE,
                        'web_path'    => Upload::DB_WEB_PATH,
                        'system_path' => Upload::DB_SYSTEM_PATH
                    ) )
                    ->validator( Validate::fileSize( 52428800, 'Files must be smaller that 50 MB' ) )
                    ->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload an pdf document" ) )
        ->process( $_POST )

    0 0

    I found an example here to set the row details like this:

    var dt = $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": "scripts/ids-objects.php",
            "columns": [
                    "class":          "details-control",
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ""
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "position" },
                { "data": "office" }
            "order": [[1, 'asc']]
        } );

    but this is for a predefined header. What I have is like this:

                                "scrollX": true,                                               
                                data: record,
                                columns: header,
                                responsive: true                                      

    Now I'm wondering how to make it that it will include a row that has all additional details. I tried to use or setup it like this but didn't worked:

    $firstcolumn = array('title' => array(
                "className"     =>      'details-control',
                    "orderable" =>      false,
                    "data" =>           null,
                    "defaultContent" => ''
    array_unshift($rowheader, $firstcolumn);
    foreach($rowheader as $row){
                // $rows['']
                $a['title'] = $row;
                $headervalue[] = $a;
                $a = array();

    0 0

    I have a table:

    <table data-url=""></table>

    and in js:

        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "---------------------",
            "dataSrc": "data",
            "type": "POST"
        "columns": [
            {"data": "id"},
            {"data": "title"},
            {"data": "title_en"},
            {"data": "status"},
            {"data": "city"},
            {"data": "html"}

    I want to use each table's data-url for datatable ajax URL.
    Can I do this?

    0 0


    I want to search out certain teams when clicking buttons. This page will give you an example:

    Basically when you click off one of the Teams, like "NY", or "ATL", I want their records to disappear from the table (hidden is fine). The search column would be the 3rd column. I can't figure out how to filter out things..only filter for.

    0 0

    I'm pilot testing datatables for my company, and I'm able to run the editor/node.js example with mysql running locally on my machine. All the examples run just fine at https://localhost:8081/examples.

    All things being equal, i modify the db.js file to say the following:

    let knex = require('knex');
    module.exports = knex({
        client: 'oracledb',
        connection: {
            host: 'oracledev',
            user: 'test',
            password: 'test',
            database: 'orcl'

    And then attempt to run the example with npm start and i get the following output

    DataTables Editor demo - navigate to http://localhost:8081/
    TypeError: Cannot read property 'replace' of undefined

    the line that comes back right after the server starts is TypeError: Cannot read property 'replace' of undefined And the source of that error i'm finding is very difficult to track down.

    Please advise!

older | 1 | .... | 2267 | 2268 | (Page 2269) | 2270 | 2271 | .... | 2326 | newer