I changed target from -1 to 0 and it did move the button to the first column. But my first column data is either blocked or shifted depending on if I have column head for the button. My data is from an array. Not sure if that has any impact.

I have a couple different problems with SearchPanes. I'm calling SearchPanes from a bootstrap4 button on the main page. When SearchPanes loads I get panes that are three wide and at least three rows. The "layout: columns-1" seems to have no effect no matter what I set it to.
I'm also having difficulty with the sort, scroll, etc. buttons/icons in the panes. They are tiny but they work. Is there a way to style the search text field at the top of the pane? The pagination buttons do not appear in the panes either and cascadePanes has no effect. I seem to be getting some kind of default SearchPane.

My js and css included files are ...

<link rel="stylesheet" type="text/css" href="css/menu_style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4-hover-navbar.css">
<link rel="stylesheet" type="text/css" href="common/DataTables/SearchPanes-1.1.1/css/searchPanes.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/SearchPanes-1.1.1/css/searchPanes.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/Editor-1.9.2/css/editor.quill.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/fontawesome-pro5/css/all.css">
<link rel="stylesheet" type="text/css" href="css/highlight-10.1.2.min.css">
<link rel="stylesheet" type="text/css" href="css/quill.snow.css">

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper-1.12.9.min.js"></script>
<script type="text/javascript" src="js/bootstrap-4-hover-navbar2.js"></script>
<script type="text/javascript" src="common/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="common/DataTables/SearchPanes-1.1.1/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="common/DataTables/SearchPanes-1.1.1/js/searchPanes.bootstrap4.min.js"></script>
<script type="text/javascript" src="common/DataTables/Editor-1.9.2/js/editor.quill.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="common/fontawesome-pro5/js/fontawesome.js"></script>
<script type="text/javascript" src="js/highlight.min.js"></script>
<script type="text/javascript" src="js/quill.min.js"></script>

<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />

and my client side script looks like this...

    var table=$('#cases').DataTable( {
        searchPanes:{
            layout: 'columns-1',
            columns: [1,2],
            cascadePanes: true,
            viewTotal: true,
            dtOpts:{
                dom: 'tp',
                paging: true,
                pagingType: 'numbers',
                searching: false,
            }
          },

        dom: \"<'row dom_wrapper fh-fixedHeader'B<'col-sm col-md'>i<'col-sm col-md'>l<'col-sm col-md'>f<'col-sm col-md'>p>\" +
    \"<'row'<'col-sm col-md'tr>>\" +
    \"<'row'<'col-sm col-md'i><'col-sm col-md'>p>\",
        ajax: 'cases-con.php',
                 ...etc.

buttons: [
          {
           ...etc.
          { 
            extend: 'searchPanes',
            className: 'btn btn-default btn-sm-menu'
          },
        ],
        columnDefs: [
            { className: 'dt-body-nowrap', targets: [ 3, 4, 5, 6 ] },
            { className: 'dt-head-center',  targets: -1 },
            {
                searchPanes:{
                show: true,
                dtOpts:{
                    dom: 'ti',
                    info: true,
                }
              },
                  targets: [1,2]
              }
        ],
        columns: [
                   ...etc.

Hi, I have been looking for ways to manage my WordPress post content with a spreadsheet. I was wondering it it possible to send TablePress rows into post to manage all my post content in one place? I know their are spreadsheet importer plugins however I felt it was worth to see if TablePress could do this.
Thank you for your time
Kim

Description of problem: I'm trying to order the table on column 1, which contains href tag with integer id's. It orders it like its a string, placing 29 before 9.

I'm using datatables 1.1.10. When I look up this question, it states that this new datatables version should be able to automatically handle this, but it does not for me.

I've also tryed setting "type":"html" and "type":"html-num" which on first load, sets the ordering correctly but does not work when I toggle the order changing icon.

If there is anything I am missing in my setup, or any thing I may have overlooked, please let me know.

I am using this example as my table: https://datatables.net/examples/api/row_details.html

Instead of .hide() and .show() I want to try and make it a little more appealing with using slideUp() and slideDown()

so I changed line 50 from:

row.child( format(row.data()) ).show();

to:

row.child( format(row.data()) ).slideDown();

But this results in a jQuery error:

Uncaught TypeError: row.child(...).slideDown is not a function

I don't understand because .show() is a jQuery function, just like slideDown() so why is it not working?

I searched around a bit, but didn't quite see anything similar and hoping there is an easy solution to this other than 'watching' the changes on both columns to update the other when one is changed.

I have these two columns. One is basically a replication of the other just showing the data in a different way - one is an image link and the other a text link. One is hidden and the other is visible. I have a button that I use as a 'toggler' which will reverse the visibility of these columns - all image links shown, click the toggle button, now all text links are shown, and vice versa.

It works as it should, but I noticed that even though I am using the same column to sort with it doesn't update the sorting icons for BOTH columns. I guess I just assumed it would due to setting orderData. For instance, the 'window_title' column is sorted ascending and its icon is highlighted showing it is ascending, I click the toggle button, the columns switch visibility, and now the 'null' column doesn't show it is sorted ascending (the icon is 'grey' as if it has never been sorted). I can click on its column header to sort the column, which activates its sorting icon, click the toggle again to switch columns, and now that one doesn't have a highlighted sorting icon.

So, I guess what I am asking here is if there is anything in addition to orderData which would keep both of these columns sorted in the same state, regardless of which was changed/clicked, and make sure their sorting icons are updated as well?

{
    "data": null,
    "orderData": [2], //use order data from window title column for sorting
    "visible": true,
    "render": function ( data, type, row ) {
        return //show image link using row['window_title']
    }
},      
{
    "data": "window_title",
    "visible": false,
    "render": function ( data, type, row ) {
        return //show text link using data
    }
},

I'm trying to get my Editor trial working, but when I click on any of my editable cells, I see this error thrown in my console. It's a private project so unfortunantly I don't have a public URL to share, but happy to provide any details I can.

Uncaught TypeError: dtE2P[F88] is undefined
K1h][l7P datatables.min.source.js:256
K1h][u3u datatables.min.source.js:256
g datatables.min.source.js:600
_editor datatables.min.source.js:601
_constructor datatables.min.source.js:594

I am using angularJs and JQuery datatable. When I tried to group it, it's really really simple grouping such as runcode ='LTL'. But when i group it, it is grouping by multiple 'LTL'. Sometimes three or four. How can I debug it thoroughly and how can I solve this? any body got the same problem?

The code below get the

scope.$on("datatable.masterManifestGroup", function (event, groupData) {
    event.preventDefault();
    scope.options.orderFixed[0] = 33;
    datatable.rowGroup().dataSrc('parentManifestId');
    datatable.draw();
});

http://live.datatables.net/wurejodu/1/edit

When the user enters a value into an <input> field I would like to validate the input amount. If it is lowercase 'i' or 'e' return uppercase ('I' or 'E') to the input field; otherwise, return blank to the input field.

Hi there -- I'm using DataTables in Webpack and following the instructions here: https://www.datatables.net/download/npm

The interesting thing about Webpack is that it provides BOTH AMD and CommonJS environments, so when the datatables.net module checks for what to export, it defaults to the AMD module. This breaks everything if in fact you used a CommonJS require() to import the module. What you get is a very mysterious 'cannot set $ of undefined' error.

It took me a while to figure this out but as far as I can tell there are two ways to fix this without modifying the datatables.net code:
(1) Disable AMD entirely in Webpack (see http://stackoverflow.com/questions/29302742/is-there-a-way-to-disable-amdplugin); or
(2) Do NOT immediately invoke datatables.net as instructed at https://www.datatables.net/download/npm. In other words, just require the file without invoking or passing arguments. I'm not exactly sure why this latter solution works.

I suppose an additional solution would be to just embrace the AMD dependency but I have not tried this.

I like DataTables a lot so posting this here to help anyone else out that may run across this issue.

swinc

I have two problems with the upload, where I'm pretty at a loss now. It's a simple upload. Upload file, when all ok close window done.
I use my own server file that does the filehandling. The file is uploaded and can be found in the intended directory, but I always get an error message that the file was not uploaded.

My server script sends the correct answer, as you can read in your documentation. I am at a loss as to what is going wrong here.

{"files":{
 "tticket":{
  "MEMBERSo.xlsx":{
   "id":0
  }
 }
},
"upload":{
 "filename": "MEMBERSo.xlsx"
}}

The second problem, once something has been done with the frame, it won't work again. So if I get the error message back at the first call, wrong file format and I close the from and start again, then the error message remains. If you ignore the message and try to upload another file, nothing works anymore. In the browser debugger you can see that the ajax is not called. An ajax is then sent when I reload the page.
Enclosed my js script and a screenshot of the error message and the json that comes from the script

Can you help me in my problem?

Andreas

Link to test case: is local on my PC, not external.
Debugger code (debug.datatables.net): I tried to generate the debugger code, but the given link did not work,
https://debug.datatables.net/izodiy
Error messages shown: see above

var editor;

$( document ).ready( function() {
    var dtButtons = [];

    editor = new $.fn.dataTable.Editor( {
        ajax: 'php/atw-core/server-process.php?tt=2',
        table: '#file-tbl',
        display: 'bootstrap',
        /*template: '#fileForm',*/
        fields: [
            {
                label: 'Filename:',
                name: 'filename',
                type: 'upload',
                dragDrop: false
            }
        ]
    } );

    dtButtons.push( {
        extend: 'create',
        editor: editor,
        text: '<i class="fas fa-upload text-red-900"></i>',
        titleAttr: 'Upload file',
        className: 'btn-atw btn-dt',
        formButtons: [
            { text: 'up', action: function() { this.submit(); }, className: 'btn-danger btn-dt' },
            { text: 'Cancel', action: function() { this.close(); }, className: 'btn-light btn-dt' }
        ],
        formTitle: '<i class="fas fa-upload text-red-900"></i> <span class="text-red-900">Upload file</span>'
    } );

    dtButtons.push( {
        extend: 'remove',
        editor: editor,
        text: '<i class="fas fa-trash text-red-900"></i>',
        titleAttr: 'delete selected file',
        className: 'btn-atw btn-dt',
        formButtons: [
            { text: 'Remove', action: function() { this.submit(); }, className: 'btn-danger btn-dt' },
            { text: 'Cancel', action: function() { this.close(); }, className: 'btn-light btn-dt' }
        ],
        formTitle: '<i class="fas fa-trash text-red-900"></i> <span class="text-red-900">remove selected file</span>'
    } );

    var tticket = $( '#file-tbl' ).DataTable( {
        ajax: {
            url: 'php/atw-core/server-process.php?tt=1',
            type: 'POST'
        },
        autoWidth: false,
        select: true,
        serverSide: true,
        processing: true,
        ordering: false,
        pagingType: 'numbers',
        pageLength: 15,
        dom: "<'row'<'col-sm-4 DT_Buttons_Style'B><'col-sm-4'><'col-sm-4'>>rt<'row'<'col-sm-6'i><'col-sm-6'p>>",
        columnDefs: [
            { targets: 0, visible: true, className: 'text-right w--30' },
            { targets: 1, visible: true, className: 'text-left' },
            { targets: 2, visible: true, className: 'text-left' },
            { targets: 3, visible: true, className: 'text-right' },
            { targets: 4, visible: true, className: 'text-right w--180' },
            { targets: '_all', visible: false, searchable: false, orderable: false }
        ],
        columns: [
            {
                data: '_index'
            },{
                data: 'filename'
            },{
                data: 'fileext'
            },{
                data: 'filesize', render: function( data ) {
                    return formatBytes( data );
                }
            },{
                data: 'filedate'
            }
        ],
        buttons: {
            dom: {
                container: {
                    className: 'dt-buttons btn-group flex-wrap'
                }
            },
            buttons: dtButtons
        },
        initComplete: function( data ) {
            $( '#file-tbl' ).removeClass( 'd-none' );
        }
    } );

    editor.on( 'uploadXhrSuccess uploadXhrError', function( e, b, json ) {
        console.log( json );

        //editor.close();
        //tticket.ajax.reload( null, false );
    } );
} );

$.extend( true, $.fn.dataTable.Editor.classes, {
    field: {
        label: 'col-md-12 col-form-label pa-label',
        input: 'col-md-12 pa-form'
    }
} );

function formatBytes( bytes, decimals = 2 ) {
    if ( 0 === bytes ) return '0 Bytes';

    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    const i = Math.floor( Math.log( bytes ) / Math.log( k ) );

    return parseFloat( (bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[i];
}

I know about the pipelining, but this does not seem to work well with scroller (I don't want pages itself)

I also know you're going to say: for n rows you don't need scroller.
To that I say: yes the browser can handle it, that does not mean the server can load them as fast from the database nor does it fix the extra delay you have because the response is heavier.

I just want everything to be snappy and this would solve 2 problems for me:
- faster scrolling when going back
- no shifting while scrolling when some rows have a different count in lines
- maybe less problems selecting multiple rows over extra draws

Thanks

I am trying to change the pagination query parameter name from 'draw' to 'page'. Is there an option to do that ?

I need the minDate option to depend on a value in another datefield. I read that minDate won't accept a function, so what I have seen in non-DataTable projects is code like this:

$('[name=myradiogroup]').change(function () {
    var newMininumDate = /*insert logic here*/;
    $('#datepicker').datepicker('option', 'minDate', newMininumDate);
});

One way I was thinking of doing this in DataTables is to use the .clear() and .add() on open of the Editor (or select of the DataTable), like this:

var newMininumDate = /*insert logic here*/;
editor.add( {
    type:  'datetime',
    label: 'Start date:',
    name:  'start_date',
    opts:  {
        minDate :newMininumDate 
    }
} );

I just wanted to make sure this is the most efficient way to do this?

please explain with theory and example what is r in sdom

The docs (https://editor.datatables.net/reference/field/text) have this:

This makes it possible to set attributes such as maxlength and required.

Does that mean that only those two attributes are allowed?

Also just noticed a typo on the same page:
"Setting maxlength and placeholder properities:"
"...properties:"

Hi,

I've added a button to collapse the .searchPanes div without collapsing the whole SearchPanes container (which is why I'm avoiding the default searchPanes button). However, I would like to add the functionality of the active filter count in the button text (e.g. "Advanced Filters (2 Active)" ). Is there a way to use the searchPane button language options on my custom button, or do I need a special function update the button text? I'm not sure how to approach this.

I would also like to remove the default title div from SearchPanes. I'm currently hiding it in css, but if there's a way to eliminate it entirely in the searchPane options, that would be preferable.

http://live.datatables.net/jigixuqe/1/edit

Thanks!

This thread is for feedback of the SearchPane blog post.

SearchPane is currently "experimental", in the sense that it hasn't been released as a full extension for DataTables and all that entails, as I would like to get some early feedback on the software. Is it useful? What is it missing? I'll maintain a list of requests in this post so we don't end up with too many duplicates.

Regards,
Allan

Feature list

• Full support for Bootstrap, Foundation, Semantic UI, etc.
• Server-side processing support (loading data from the server-side)
• Have the count show two numbers - the first would be how many remain in the filtered set and the second would be how many in the table overall.
• Ordering of data to match the DataTable
• Search the search pane!
• Rebuild API method for selected columns
• Collapsible container
• Support for array based data
• Interfacing with the global search (difficult?)
• Selection options similar to Select (e.g. os and multi, etc.)
• Option to match column visibility (with or without Responsive?)

// Loop over the cells in column C
$('row c[r^="C"]', sheet).each( function () {
// Get the value
if ( $('is t', this).text() == 'New York' ) {
$(this).attr( 's', '20' );
}
});
In this example,they are looping over cells in 'C' column..how can we get this column A,B,C,D .... index position dynamically without specifying it??

Hi there,

I have a datatable with dropdown filters for multiple columns. My column 5 shows me different entries like web1, web2, web3, pc1,pc2 etc. I now want to add an extra value to the dropdown for column 5 called web% and pc% to return all the entries starting with web or starting with pc.
I came as far as below, I can add a value, but right now it will show also in the other columns which makes sense, but even worse it does not work. Is this easily possible? I hope someone can give me a hint. Thank you in advance.

``` initComplete: function () {

        this.api().columns([2, 3, 5,6,7]).every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty())
                .on( 'change', function () {


                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    console.log()
                    column
                        .search( val ? '^'+val+'?$' : '', true, false )
                        .draw();
                } );
            select.append( '<option value="Web">Web%</option>' )
            column.data().unique().sort().each( function ( d, j ) {

                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }

```