Hi
We're using Datatables in an application and have just started adding in the export to Excel function (using Buttons). It works great but have a question. In our tables we're using some hidden spans for sorting purposes (mostly dates). These hidden spans are also included in the export to Excel. Is there any way to not have these exported to Excel?
Thanks
Mark

I have a quick solution that someone may be able to improve as we needed a simple way to have word by word filtering on the server side. I know this is not perfect but perhaps someone can make a few improvements. Essentially we create a multi-dimensional array to support different words and then match against all fields using an OR and then use an AND to join the two. Can anyone see improvements that can be made here to improve performance or deal with potential issues?

static function filter ( $request, $columns, &$bindings )
{
    $globalSearch = array();
    $columnSearch = array();
    $dtColumns = self::pluck( $columns, 'dt' );

    if ( isset($request['search']) && $request['search']['value'] != '' ) {
        $str = explode(' ', $request['search']['value']);

        for ( $x=0, $l=count($str) ; $x<$l ; $x++ ) {
            if ( $str[$x] != '' ) {
                for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
                    $requestColumn = $request['columns'][$i];
                    $columnIdx = array_search( $requestColumn['data'], $dtColumns );
                    $column = $columns[ $columnIdx ];

                    if ( $requestColumn['searchable'] == 'true' ) {
                        $binding = SSP::bind( $bindings, '%'.$str[$x].'%', PDO::PARAM_STR );
                        $globalSearch[$x][] = "`".$column['db']."` LIKE ".$binding;
                    }
                }
            }
        }
    }

    // Individual column filtering
    if ( isset( $request['columns'] ) ) {
        for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
            $requestColumn = $request['columns'][$i];
            $columnIdx = array_search( $requestColumn['data'], $dtColumns );
            $column = $columns[ $columnIdx ];

            $str = $requestColumn['search']['value'];

            if ( $requestColumn['searchable'] == 'true' &&
             $str != '' ) {
                $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
                $columnSearch[] = "`".$column['db']."` LIKE ".$binding;
            }
        }
    }

    // Combine the filters into a single string
    $where = '';

    if ( count( $globalSearch ) ) {
        foreach ($globalSearch as $globalSearchar){
            $where .= ' AND ('.implode(' OR ', $globalSearchar).')';
        }
    }

    if ( count( $columnSearch ) ) {
        $where = $where === '' ?
            implode(' AND ', $columnSearch) :
            $where .' AND '. implode(' AND ', $columnSearch);
    }

    if ( $where !== '' ) {
        //remove the first AND
        $where  = preg_replace('/AND/', '', $where, 1);
        $where = 'WHERE '.$where;
    }
    return $where;
}

Here's the bottom line... you can get DataTables to work in Angular 2 just fine - as long as your data is static. But if you have a real-world application where you call an Angular service to dynamically fetch your data when your component is initialized, it breaks DataTables. The table displays correctly initially. But as soon as you try to sort a column or search, all of the data disappears.

I was able to implement a really ugly work-around (hack) by delaying the application of the DataTable() call via a setTimeout - essentially giving Angular time to manipulate the DOM before DataTables does. But this is undesirable for a number of reasons.

I was hoping that Angular-DataTables (a bridge between the two) would solve the problem. And while I do like some things about it, this particular problem does not go away.

I understand that this is not an Angular 2 support forum. But given the popularity of that platform, I would think that the DataTables team would have some interest in making it work properly on it.

I am using server side processing for my tables. I have tables that have 60000+ rows with 65+ columns, so using client side is not an option for me. My end users want to pull up the tables and then use the filtering and sorting to narrow down what they are seeing. Then they want to Export All, usually still 30k - 40k rows with the 65+ columns and with the sorting in place too. I have tried a few things that I've found elsewhere and am hoping that you can help. Here's what I've tried so far:

{ extend: 'excel',
    text: 'Export Current Page',
    exportOptions: {
        modifier: {
            page: 'current'
        }
    },
    customize: function (xlsx)
    {
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
        $('row:first c', sheet).attr('s', '7');
    }
}

This does not do what I would like. It exports only the current page (which is why I made the text for it 'Export Current Page')

I've also tried this:

{
    text: 'Export All to Excel',
    action: function (e, dt, button, config)
    {
        dt.one('preXhr', function (e, s, data)
        {
            data.length = -1;
        }).one('draw', function (e, settings, json, xhr)
        {
            var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
            var addOptions = { exportOptions: { 'columns': ':all'} };

            $.extend(true, excelButtonConfig, addOptions);
            excelButtonConfig.action(e, dt, button, excelButtonConfig);
        }).draw();
    }
}

This simply sends the whole table to the screen instead of sending it to an excel file. Though it does pull the whole data set.

I'm sure that through the two of these I'm missing something that would allow me to Export the whole data set without sending it to the screen first.

In it's current state, if you try to use the selectize plug-in with multiple values (i.e. a comma delimited list), when you edit the field, you do not get what is currently selected in the input box. I believe the set method in the plug-in code isn't accounting for the delimiter and is only passing back the full string. I hard coded my delimiter into the plug-in and it now works...

from:
set: function ( conf, val ) {
return conf._selectize.setValue( val );
},

to:

set: function ( conf, val ) {
return conf._selectize.setValue( val.split(",") );
},

I'm not sure if there is a way to pass the delimiter specified in the selectize opts (since hard coding is bad), but I wanted to make you aware of it.

Is it possible to show some more column if you have the rights for that?
I have written the rights in the $_SESSION. How can I read the $_SESSION rights with js. I do it with following line on the of my php script.

            $rdata = array(
                "data" => $data,
                "draw" => "1",
                "recordsTotal" => $nr_datarows,
                "recordsFiltered" => $nr_datarows,
                "recordRights" => (isset($_SESSION["administrator"]) and $_SESSION["administrator"] == "1") ? "1" : "0"
            );
            echo json_encode($rdata);

I know that js can not read the $_SESSION, but maybe you have better idea. Now comes my Problem. How can I show the columns if the rights are ok.
I tried something like this and more, but it did not work.

        "columnDefs": [
            { targets: [ 0, 1, 2, 3, 4, 5, 6, 7, 9 ], visible: true },
            { render: function(data, type, row){
                    ($data.recordRights == '1') ? (targets: 8, visible: true) : (targets: 8, visible: true);
            }},
            { targets: '_all', visible: false }
        ],

I know that code is bullshit, but I have no more ideas, how can I do this.
Can you give me an hint, what I should do?

Andreas

I am trying to use the editor api to simply set the title and message during edit/create.
No errors are shown. But the form is not displaying the text.

Obviously I am misusing the API but I cannot quite see where i have gone wrong.

Can anyone help me ..

Thanks in advance

cpdHoursEditor = new $.fn.dataTable.Editor({ ... });
cpdHoursTable = $('#cpdHoursTable').DataTable({ ... });

// this does nothing
cpdHoursEditor.title('My Edit Title').buttons('edit');
cpdHoursEditor.title('My New Title').buttons('create');

// this sets the message the first time the editor form is displayed.. after that no message is displayed
cpdHoursEditor.message("mymessage").buttons("edit)

Hello,

Is it possible to use a HTML5 data attribute to hide a column? Perhaps something like this:

<thead>
<tr>
<th data-hide="true">Hide me!</th>
</tr>
</thead>

Thanks.

Regards.

In my datatable I have enabled both bubble editing and editing a single or multiple items after selection with main editing form.

If I disable multiEditable in a field, the field works only when clicking new button.
When I select a single item and click edit the field for which multiEditable has been disabled says that the input can only be edited individually. Is taht normal? Can i specify tomehow to the editing form that only a sinlge element is selected and why do i need to do that since the datatable knows how many elements have been selected anyway?
Even if I try to use bubble editing it says the same, even though bubble editing is by default for changing a single cell. Why?

For now I have left multiEditable enabled to avoid these issus but I would appreciate it if you could point me to the right direction.

I have a project using Bootstrap 3+ and jquery 2+ that I provide.

When I download from .zip file I get a folder with all the .js and .css files for all the frameworks.

My question is. Which script and link files do I need from DataTables?

I assume I need the min versions of datatables.bootstrap.js and css.

Do I also need jquery.datables.js and css? Also, do I need the jquery.dataTables_themeroller.css

See attached. Thanks!

I'm trying to port an existing web app into DataTables/Editor. Any record in the table being edited might have zero to many related records in another table. Is there any way from within an Editor form to invoke the editor again on the related table record in the related table? I'd like to be able to create a record in the related table when necessary, as well as to display the related records in that table. So far, I haven't found a way to do this within the DataTables/Editor framework.

Since this is a feasibility question, I don't have a problem pagers debug or link to. However, I can provide more detailed information if that would help someone who wants to respond.

I just upgraded to using dataTables 1.10.13 and when using "buttons": [ 'copy', 'excel', 'csv' ] for some reason copy and csv buttons default to HTML5 like they are supposed to however the excel button defaults to flash. Any ideas on what would cause just the one button to not default to the proper type?

I'm trying to apply a column width to each column, but it is not being reflected in the output:
http://live.datatables.net/mekuxeya/1/edit?js,output

I've tried setting autoWidth to both true and false, but it does not seem to have any effect. Bootstrap styling, scrollX, and scrollY are also being applied.

https://datatables.net/reference/option/columns.width

Hi guy's,

I'm doing a big filtering system for the datatables, on which it consists on having multiple box's in each column, and in each box, there is a list of checkbox that come from the cache('search') and a multi filter system of multiple options between two selects and two inputs.

After battling with this, and almost finishing it, it came an strange issue. The cache function doesnt return any info on the data that is appearing on the table - it did yesterday. I already rollbacked alot of code and nothing.

This is the code I'm using...

table.columns().flatten().each(function (colIdx) {
    table.column(colIdx).cache('search').sort().unique().each(function (d) {
        console.log("inside")
    });
});

As you can probably guess, it should run the message in the console, but nothing. Even when getting the data directly from the cache, It doesn't bring anything.

Did this happened to anyone?

Thank you!

I have my functional datatables when it is in high resolution, but when it is on a small screen it does not capture data from the server.

Large screen: https://i.stack.imgur.com/pGPA2.png
Small Screen: https://i.stack.imgur.com/ABQ74.png

As if not recognize each row correctly.

Here's the way I created the table with datatables:

var table = $('#table').DataTable({
destroy: true,
filter: false,
processing: true,
serverSide: true,
autoWidth: true,
ajax: {
url: 'tabla/usuarios',
global: false,
method: 'POST',
data: function (d) {
d.campo = $('input[name=filter_campo]').val();
d.perfil = $('select[name=filter_perfil]').val();
d.estados = $('select[name=filter_estados]').val();
}
},
columns: [
{data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
return meta.row+1;
}
},
{data: 1},
{data: 2},
{data: 10},
{data: 11},
{data: 5,
render: function( data, type, full, meta ){
if (data) {
return '<input id="toggle" data-info="toggle'+full.id+'" name="my-checkbox" type="checkbox" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
}else {
return '<input id="toggle" data-info="toggle'+full.id+'" name="my-checkbox" type="checkbox" data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
}
}
},
{data: 9, searchable: false, orderable: false},
],
search: {
"regex": true
},
order: [[1, 'asc']],
fnDrawCallback: function() {
$("[name='my-checkbox']").bootstrapToggle();
$('[data-toggle="popover"]').popover({
placement : 'top',
html : true
});
}
});

editar("#table tbody",table);

How do I get the data from the table when I click on one of the buttons, example "Editar" (Edit in spanish):

var editar = function(tbody, table){
$(tbody).on("click","button.editar", function(){
var data = table.row($(this).parents("tr")).data();
$('#editar_id').val(data[0]);
$('#editar_alias').val(data[1]);
$('#editar_correo').val(data[2]);
$('#editar_perfil').val(data[8]);
$('#ModalEditar').modal('show');
$("#editar-alias").first().focus();
})

}

Note: in the responsive the property loses the button "switch".

I'm from venezuela, excuse my little English.

I want to use the 'Data Tables (v1.10)' component that came along with SmartAdmin Angular 2 framework (https://smartadmin-ng2.github.io/dashboard/analytics), and want to implement/extend most of the features listed here https://datatables.net/extensions/index, for example –
* Fixed Header
* Fixed left Columns
* Re-order columns
* Scroller
I tried some of these, but it does not work.

Has anyone in this forum used/accomplished the above? Does it work? I am not sure if there are any issues with the framework or if I am missing something.

I am looking for some documentation on –
* Steps on what needs to be done to accomplish this
* What components/packages/libraries needs to be installed
* Sample script/snippets on how these features are implemented

Any information or directions will be greatly appreciated. Thanks in advance!

Hi!
How can I set single column for no global search BUT for filter?
My DT:

    var table = $('#users-table').DataTable({
        "ordering": false,
        "bLengthChange": false,
        pageLength: 50,
        "bDeferRender": true,

        processing: true,
        serverSide: true,
        ajax: '/route',
        columns: [
            { data: 'firstname', name: 'firstname' },
            { data: 'lastname', name: 'lastname' },
            { data: 'list', name: 'list' },
            { data: 'badge', name: 'badge' },
            { data: 'status', name: 'status', orderable: false, searchable: false },
// I want to custom filter for this (status) but it cannot be searchable
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.13/i18n/Polish.json"
        },

    });

Here is my custom filter:

    $('#status').on('change',function(){
        table
            .columns(4)
            .search( this.value )
            .draw();
    });

I can see most of the Semantic-UI JS libraries available on the NPM registry, like https://www.npmjs.com/package/datatables.net-buttons-se. It lists datatables.net-se (https://www.npmjs.com/package/datatables.net-se) as a dependency, but that package doesn't appear to exist. On the Semantic UI example (https://datatables.net/extensions/buttons/examples/styling/semanticui.html) the JS is available via CDN (https://cdn.datatables.net/1.10.13/js/dataTables.semanticui.min.js) . Why isn't it available by NPM or even on the download builder?

Hi ,

How i can accept date type input in DD-MM-YYYY format in Editor.

Regards.
Sunil

Thanks i advance.
I have

and

            label: "Título:",
                            type:  "textarea",
            name: "titulo"
        }, {

Thanks