i want to change url by changing page and add the page number to the end of url for example : mysite.ir/datatable?page=2
and when i enter this url in browser the datatable render from page 2 not page 1
i want to use this feature for indexing purpose by google

I need to render the inputs of the hidden fields and add display: none to it.
I need them beacuse i have kind of a custom dependency on them .
@Allan Can you help me on this

Hello,

I want to send form inputs in mysql database but i don't know how to do.

On this page it is explained how to do it, but I do not know how to put the data in a variable and insert them in my database .

https://datatables.net/examples/api/form.html

I have a datatable loaded with server side working fine. Now I want to add some column filter (those with filter class) but is not working.
Here is my html:

And my js:

var $tableCon = $('.data-table:eq('+ 1 +')');
var $table = $tableCon.find('.table');

var dataTable = $('#js-table').DataTable( {
"processing": true,
"serverSide": true,
"bFilter": false,
"ordering": false,
"bLengthChange": false,
"ajax": "/agetdatatable",
},
initComplete: function(){
$tableCon.find('.selects').insertBefore($('#js-table'))
var counter = 0;
dataTable.columns('.filter').every( function (e) {
var column = this;
$tableCon.find('.selects').append('

<

div class="select-holder"><label><span class="label">'+ $table.find('thead th:eq('+ e +')').html() +'</span><select><option value="">- All -</option></select></label>');
var select = $tableCon.find('.selects .select-holder:eq('+ counter +') select')
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false );
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );

            counter++;
        } );
    }
} );

The dropdown select is loading well, but when I click on it datatable is not refreshing.

Any help would be helpful

Hello, i have 2 different datatables on the same page and i have 2 diferent forms to filter the data of each datatable.
I`m using the $.fn.dataTable.ext.search.push() method, and it works fine when only one table. What should i do to make it work with 2 datatables?. Each of one has his own name and are attached to different html tables. Im using editor too.

Hi
How to disable the auto-sort if we update the sorting column.
thanks

High Level: I have a table that I am filtering, I want export buttons to include ALL data in the table, including what's filtered, including hidden columns.

It feels like all the articles I find are people leveraging AJAX and asking how they export data currently loaded + data that's unloaded. That is NOT my issue, I'm not using AJAX and the data is all encapsulated on the page. My initialization is fairly simple:

            var table = $('#table').DataTable({
                dom: 'Bfrtip',
                "aoColumnDefs": [
                    {
                        "aTargets": [0,1,2],
                        "bVisible": true,
                        "bSearchable": true
                    },
                    {
                        "aTargets": [3],
                        "bVisible": false,
                        "bSearchable": true
                    },
                    {
                        "aTargets": ['_all'],
                        "bVisible": false,
                        "bSearchable": false
                    }
                ],
                buttons: [
                    'csv', 'excelHtml5', 'pdf', 'print'
                ]
            });

My reading suggests TableTools would do this, but I don't have much interest in the deprecated and replaced tool. Can this be accomplished with Buttons? Hidden columns are included just fine, it's the currently filtered data I can't find a way to include.

Thanks!

Hi,

I seem unable to replace the default filtering.

I want to keep the default GUI search box, but I want my function to run instead of it combining the default and my custom.

Problem is , my custom search is an OR, but the default search creates it as an AND, so I'm not getting rows returned.

How do I override the default search function without having to use my own DOM control or how do I make the custom search and the default search work together as an OR not an AND?

here is my custom filter...

// data tables custom search to include genres, styles, labels not displayed in GUI
// case insensitive
$.fn.dataTableExt.afnFiltering.push(
    function (settings, data, dataIndex) {
        var search = $('.dataTables_filter input').val();
        var found = false;

        if (search == '') {
            found = true;
        }
        else {

            // check displayed values
            // barcode
            if (data[0].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }

            //cat no
            if (data[1].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }

            // title
            if (data[2].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }

            // year
            if (data[3].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }

            // don't waste time if already found
            if (!found)
            {

                // loop Genres
                $.each(settings.aoData[dataIndex]._aData.Genres, function (i, obj) {
                    if (obj.genre.toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) {
                        found = true;
                    }
                });

                // loop Styles
                $.each(settings.aoData[dataIndex]._aData.Styles, function (i, obj) {
                    if (obj.style.toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) {
                        found = true;
                    }
                });

                // loop Labels
                $.each(settings.aoData[dataIndex]._aData.Labels, function (i, obj) {
                    if (obj.label.toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) {
                        found = true;
                    }
                });
            }

        }
        return found;
    }
);

Hello Alan
for some parts of my pages I am building directly the PDF and some of the functions (.open(), .print()) do not work (for me) in pdfmake 0.1.18 but yes in 0.1.24
I have added in that specific pages the call for 0.1.24 after the one for datatables and all buttons seem to work perfectly.
Before I rebuild my download without including pdfmake and using the last version directly, would you know if there are some compatibility issues about using the latest version of pdfmake with datatables ?

Thanks a lot

I use the excel export option in a project for tables that can have a lot of data (near 10,000 rows). Datatables performs well, but after I upgraded to Datatables Editor 1.6, when I try to use the Excel export option, the process takes forever. For a table with 1,300ish rows, it takes almost two minutes to export now whereas before it would only take a second or two (see attached screenshot).

I ran a couple of profiles tests on it, and I narrowed down the problem to a regular expression in the function _addToZip. Here is the line:

str = str.replace( /<(.*?) xmlns=""(.*?)>/g, '<$1 $2>' );

Two questions:

1. I changed the line to be as follows and the execution time went down to one second as it used to be. Could this work as a substitute line? (I am not at all familiar with the XLSX spec).:

str = str.replace(' xmlns="" ', '');

1. Is this line really necessary (i.e. are the Excel files broken if it's not there)? I look in the previous version of DTE and it wasn't there and our excel files worked fine at the time.

Thanks for all your help and your time!

Hi Team,

Iam using datatable for displaying dynamic data. Successfully displayed with pagination and search method, But i want to use filter option for that whole data. Is there any possible to filtering the dynamic data?

I have a dynamically generated table on the server with varying column numbers and names. I want to provide user an option to copy a particular column by name (which is always present). Somehow it is not working. It comes back with 0 records exported.

I have posted an example at http://live.datatables.net/rumewuko/1/edit

The relevant javascript portion is below. I am suspecting that my columns syntax is not write but can't say for sure?

<script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
                        { extend: 'copy', className: 'btn btn-primary' },
                        { extend: 'csv', className: 'btn btn-primary' },
                        { extend: 'excel', className: 'btn btn-primary' },
                        {
                            extend: 'copy',
                            text: 'Copy Office',
                            className: 'btn btn-primary',
                            header: false,
                            exportOptions: {
                             columns: ['Office:name']
                            }
                        }
                 ]
    } );
} );
        </script>

Also is it possible to add some space between the buttons? Even though I have overwritten the style it seems to carry the default style and does not leave any space between buttons.

Hi,
It seems than I cannot find how to use the table.columns([0, 1, 2, 3]).search().draw() method properly...
When I tried it, it doesn't gave me the result I expected...

My simplified JS code look like this:

var table = $('#list').DataTable();
$("#list_filter input").on('keyup click', function() {
    table.columns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).search($(this).val()).draw();
});

$("#number_search").on('keyup click', function() {
    table.column(10).search($(this).val()).draw();
});

All the searchable are true and columns 9 and 10 are .hidden (display: none !important;).
My purpose here is to use the "usual" search field to search in the 10 1st column and the last one with an extra text field...

Does this search method searches on column 0 AND column 1 AND column 2 AND ... in spite of what I am expecting with OR ??

Thanks for any help!

Is it possible to conditionally change the input form type in editor?
I have a table with a list of transports associated to an order. Loading and unloading destination can be any string but if the transport type is a ship then only pre-loaded list of ports should me allowed.
That is required for statistics purpose where a misspelling of the port name can ruin the results.

Code is like bellow:

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/pageOrderTabTransport.php?id_order=' + id_order ,
        table: '#tabel_transport',
        fields: [
            {
                label: "Type:",
                name: "otc_transport.id_tip",
                type: "radio",
                ipOpts: [
                    {label: '<i class="fa fa-ship fa-2x color-1 space-bottom-1"></i> Ship', value: '1'},
                    {label: '<i class="fa fa-plane fa-2x color-2 space-bottom-1"></i> Plane', value: '2'},
                    {label: '<i class="fa fa-truck fa-2x color-3 space-bottom-1"></i> Truck', value: '3'},
                    {label: '<i class="fa fa-train fa-2x space-bottom-1"></i> Train', value: '4'},
                    {label: '<i class="fa fa-cogs fa-2x color-4 space-bottom-1 "></i> Custom', value: '5'}
                ],
                default: "1"
            },
       {
        label: "Loading from:",
        name: "otc_transport.loading_city"

/////   if Type is 1 (ship) then instead of regular string to be entered, user must select2 from a list of enlisted ports.
////    so I need to add something like:
                type: "select2",
                options: ListOfPortsLoad()

            },
// more code...

Hi Team,

I want to sort method outside the table and without using th tag

I would like to place a link in the text of 'message' within a pdfHtml5 button.

            {
                extend:    'pdfHtml5',
                text:      'PDF',
                titleAttr: 'PDF',
                title: 'My title',
                header: true,
                message: 'And I would like to have a link <a href="www.google.com">here</a>. Many thanks. ',
                customize: function(doc) {
                    doc.defaultStyle.fontSize = 6;
                }
            }

I suppose I need a function for 'message' ... but how do I do this? https://datatables.net/reference/button/pdfHtml5

My data table configuration via debugger is here:-
**http://debug.datatables.net/ecinil**

Also code is posted below in case:

Whenever a new table with more rows is drawn only the number of rows equal to previous table are clickable or mouseenter(Hover) event works.

I mean suppose I loaded table with 4 rows, clicked a row which will reload the new data set for table. Table got loaded with 8 rows. But now I will be able to select only top 4 rows. Rest all will result in error on chrome console
Uncaught TypeError: Cannot read property '_aData' of undefined.

Any help in this regard is greatly appreciable.

Thank you

``` $("#filterdata_table body").empty();

var table = $('#filterdata_table').DataTable({
    "dom": '<"row"<"col-xs-12"f>><"row"<"col-xs-12"<"chart chart-table"t>>><"row"<"col-xs-4"i><"col-xs-4"p><"col-xs-4"l>>',
    "bDestroy": true,
    "length": false,
    "ordering":false,
    'fnCreatedRow': function (nRow, aData, iDataIndex) {
        $(nRow).attr('id', aData["Campaigns"]);
    },
    'ajax': {
        "url": WebAPIURL + "api/GetNonSponsorFilterData",
        "type": "POST",
        data: function (d) {
            return JSON.stringify(NonSponsorData);
        },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        "dataSrc": function (json) {
            var return_data = new Array();
            return_data[0] = {
                'Campaigns': "Totals",
                'AppUse': numeral(json.totals.AppUsageTotal).format('0,0'),
                'FiltersSeen': numeral(json.totals.FiltersSeenTotal).format('0,0'),
                'PhotosTaken': numeral(json.totals.PhotosTakenTotal).format('0,0'),
                'UsedCamera': numeral(json.totals.UsedCameraTotal).format('0,0'),
                'UsedGallery': numeral(json.totals.UsedGalleryTotal).format('0,0'),
                'SocialShare': numeral(json.totals.SocialShareTotal).format('0,0'),
                'Impressions': numeral(json.totals.ImpressionsTotal).format('0,0'),
                'Filter_id': json.totals.Filter_id,
                'Campaign_id': json.totals.Campaign_id,
                'FilterImageUrl': json.totals.FilterImageUrl,
                'isCampaign': json.totals.isCampaign,
                'Campaign_name': json.totals.Campaign_name,
                'Filter_name': json.totals.Filter_name
            };
            for (var i = 0, j = 1;i < json.items.length; i++,j++) {
                return_data[j] = {
                    'Campaigns': json.items[i].Name,
                    'AppUse': numeral(json.items[i].AppUse).format('0,0'),
                    'FiltersSeen': numeral(json.items[i].FiltersSeen).format('0,0'),
                    'PhotosTaken': numeral(json.items[i].PhotosTaken).format('0,0'),
                    'UsedCamera': numeral(json.items[i].UsedCamera).format('0,0'),
                    'UsedGallery': numeral(json.items[i].UsedGallery).format('0,0'),
                    'SocialShare': numeral(json.items[i].SocialShare).format('0,0'),
                    'Impressions': numeral(json.items[i].Impressions).format('0,0'),
                    'Filter_id'  : json.items[i].Filter_id,
                    'Campaign_id': json.items[i].Campaign_id,
                    'FilterImageUrl': json.items[i].FilterImageUrl,
                    'isCampaign': json.items[i].isCampaign,
                    'Campaign_name': json.items[i].Campaign_name,
                    'Filter_name': json.items[i].Filter_name
                }
            }

            //console.log(return_data);
            return return_data;
        }
    },
    "columns": [
        { "data": "Campaigns" },
        { "data": "AppUse" },
        { "data": "FiltersSeen" },
        { "data": "PhotosTaken" },
        { "data": "UsedCamera" },
        { "data": "UsedGallery" },
        { "data": "SocialShare" },
        { "data": "Impressions" },
        { "data": "Filter_id" },
        { "data": "Campaign_id" },
        { "data": "FilterImageUrl" },
        { "data": "isCampaign" },
        { "data": "Campaign_name" },
        { "data": "Filter_name" },
    ]


});

// Row Click Event
//The :gt() selector selects elements with an index number higher than a specified number.
//The index numbers start at 0.
// tr:gt(0) will make first row unclickable
//tr:gt(0)
**$('#filterdata_table').delegate('tbody tr:gt(0)', 'click', function () {

    //console.log("Campaign_id  " + table.row(this).data().Campaign_id); // This will also give hidden column data for the row.
    //console.log("Filter_id  " + table.row(this).data().Filter_id);

    //Update NonSponsor object's filter_id and campaign_id

    NonSponsorData.filter_id = 0;
    NonSponsorData.campaign_id = 0;

    //console.log(table.row(this).data());

    if (table.row(this).data().isCampaign === true) {
        console.log("I am campaign");
        NonSponsorData.campaign_id = table.row(this).data().Campaign_id;
        NonSponsorData.filter_id = 0;
    }

    if (table.row(this).data().isCampaign === false) {
        console.log("I am filter");
        NonSponsorData.campaign_id = table.row(this).data().Campaign_id;
        NonSponsorData.filter_id = table.row(this).data().Filter_id;
    }

    // Update search bar
    document.getElementById("hdnFilterTblClickedCampaign").value = table.row(this).data().Campaign_name;
    document.getElementById("hdnFilterTblClickedFilter").value = table.row(this).data().Filter_name;

    document.getElementById("filter-image").src = table.row(this).data().FilterImageUrl;

    console.log("Campaign_id  " + table.row(this).data().Campaign_id);
    console.log("Filter_id  " + table.row(this).data().Filter_id);
    console.log("I am in GetFilterData()");

    // reload non-sponsor tab
    RefreshDashboardData(); ----> **Function which refreshes '#filterdata_table datatable**
});**


**// Hover over event
$('#filterdata_table')
    .delegate('tbody tr:gt(0)', 'mouseenter', function () {
        if (table.row(this).data().isCampaign === false) {
            //console.log(table.row(this).data());
            var img = '<img class="img-responsive" src=' + table.row(this).data().FilterImageUrl + '/>';
            $(this).popover({ content: img, placement: 'top', html: true, trigger: 'hover' });

            $(this).popover("show");
        }

    } );**  ```

It works fine in version 1.5.5 with https://github.com/yajra/laravel-pdo-via-oci8.

Now I have installed editor 1.6.1 and now Oracle doesn't work, especially INSERT and UPDATE.

When INSERTING I'm getting

Fatal error: Uncaught Error: Call to a member function insertId() on boolean in /var/www/html/php/lib/Editor/Editor.php:1601 Stack trace: #0 /var/www/html/php/lib/Editor/Editor.php(1045): DataTables\Editor->_insert_or_update(NULL, Array) #1 /var/www/html/php/lib/Editor/Editor.php(900): DataTables\Editor->_insert(Array) #2 /var/www/html/php/lib/Editor/Editor.php(661): DataTables\Editor->_process(Array) #3 /var/www/html/php/table.cert_vzo.php(40): DataTables\Editor->process(Array) #4 {main} thrown in /var/www/html/php/lib/Editor/Editor.php on line 1601

When UPDATING all the values are replaced by primary key, for example

ID | COLUMN1 | COLUMN2
1  | 56546 | 414

after the UPDATE all the values are replaced by ID

ID | COLUMN1 | COLUMN2
1 | 1 | 1

SELECT is working fine.

I start with an empty table html tag. I bring in data as a js array via an $.ajax request. Upon "success" of that request, I build the datatable. I explicitly set the column names and widths but there is no effect on the column widths unless I set the CSS of the table to "table-layout: fixed", which makes everything else look horrible (but the column finally has the desired width).

I'm styling with Bootstrap and I don't think I'm using any options that aren't compatible.

Here's the code.

Note:
- First row of data array from ajax request is the column titles.
- The 'columns' function is working properly.

$.ajax({
    url : "data/data.js",
    dataType : 'script',
    success : function() {
        table = $('#table1').DataTable({
            columns: columns(data[0]),
            data: rows(data),
            autoWidth: false,
            order: [[2,'desc'],[0,'asc']],
            scrollX: true,
            pageLength: 5,
            fixedColumns: {leftColumns: 1},
            fixedHeader: false
        });
       }
});

function columns(arr){
    var temp = [];
    arr.forEach(function(d,i){
        temp[i] = {};
        temp[i].title = d;
        if(d.toLowerCase()=='uds remarks') temp[i].width = "20%";
        if(d.split(' ')[d.split(' ').length-1].toLowerCase()=='date') temp[i].type = 'date';
    });
    return temp;
}
function rows(arr){
    var temp = [];
    for(i=1;i<(arr.length);i++){
        temp.push(arr[i]);
    }
    return temp;
}

Hi I prefer if the Ajax Data is in JSON format instead of the one below. That is hard to parse and also the row id is not separate.

from your example https://editor.datatables.net/examples/simple/inTableControls.html

action=edit
data[row_26][first_name]=Gavin
data[row_26][last_name]=Joyce
data[row_26][position]=Developer
data[row_26][office]=Edinburgh
data[row_26][extn]=8822
data[row_26][start_date]=2010-12-22
data[row_26][salary]=92575

How can I submit something similar to the response?

{
action: 'edit',
"data": [
{
"DT_RowId": "row_4",
"first_name": "Cedric",
"last_name": "Kelly",
"position": "Senior Javascript Developer",
"email": "c.kelly@datatables.net",
"office": "Edinburgh",
"extn": "6224",
"age": "22",
"salary": "433060",
"start_date": "2012-03-29"
}
]
}

Thanks!