I need to remove multiple rows at once with string filter with javascript. Help pls.

when I use inline edit, there seem to be a bug with select field, the scenario is as follows:
1.the field type is select;
2.the options for select are only one ;
3.in inline edit, first i click the select field, and the option appears, then I choose the only option, then click somewhere else outside the table,the edit field close as expected, but the option chosed disappears too,with a blank field left.

could you tell me why and how to solve the problem?

I think this is related to using Turbolinks, but I haven't been able to get to the bottom of what's happening.

I'm giving all tables I'd like to display as DataTables the class "enable-data-table," then initializing such tables on the turbolinks:load event.

$(document).on "turbolinks:load", ->
  $('table.enable-data-table')
    .DataTable()

This works great when I'm clicking to navigate. But when I use the browser forward or back buttons, I get a DataTables wrapper div nested in another DataTables wrapper div. The table is only displayed once, but the search box and pagination are displayed twice.

The html produced looks much like this:

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
  <div class="dataTables_length" id="DataTables_Table_0_length">
    <label>Show
      <select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="">
        <option value="25">25</option>
        <option value="100">100</option>
        <option value="250">250</option>
      </select>
     entries
    </label>
  </div>
  <div id="DataTables_Table_0_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_0"></label>
  </div>
  <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
    <div class="dataTables_length" id="DataTables_Table_0_length">
      *Identical to DataTables_Table_0_length above*
    </div>
    <table class="enable-data-table dataTable no-footer" data-order="[[ 0, &quot;desc&quot; ]]" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
      *Thead, tbody content here*
    </table>
    <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 20 of 20 entries
    </div>
    <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
      *Pagination here*
    </div>
  </div>

Any idea how to display the header & footer only once? Thanks!

Chris

Hello,
I am getting some data from AJAX into my Datatable. I am not really sure if it's the right way to display an JQuery UI Dialog with more Details from the Dataset.

How to open up the JQuery UI Dialog with Details by clicking the .open_btn ?

$(document).ready( function () {
            $('#table1').DataTable(
                {
                    'processing': true,
                    'serverSide': true,
                    'ajax': 'models/processing_returndata1.php',
                    'order': [[1, 'asc']],
                    'language': {
                        'url': '". /* PHP LANGUAGE VAR */ lang('GLOBAL_DATATABLELANGUAGE') ."'
                    },


                    'columnDefs': [{
                        'targets': 2,
                        'render': function ( data, type, row, meta ) {
                            var RCID = row[7];
                        return '<a href=\"#\" id=\"opener' + RCID + '\" openid=\"' + RCID + '\" class=\"open_btn\">VIEW</a>';
                        }
                    }],


                     responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.modal( {
                                header: function ( row ) {
                                    var data = row.data();
                                    return 'Details for '+data[0]+' '+data[1];
                                }
                            } ),
                            renderer: $.fn.dataTable.Responsive.renderer.tableAll()
                        }
                    },

                    'rowCallback': function (row, data, index) {
                        $('.action_button', row).on('click', function () {
                            showModalDialog(this);
                        });
                    },

            }
            );




        } );

Would have a method so for example if im bubble editing, I can hook into preOpen and get the current field if applicable and optionally change the set data from the modifier(). Right now I have to do:

table.column('assigned_users:name').nodes().flatten().to$().on('click', function () {
                let data = table.cell(this).data()
                self.editor.field('assigned_users').set(_.pluck(data.assigned_users, 'id'))
              })

Hello,

I am new with Editor plugin and I have a question.
I have successfully use it with basic initialisation and a simple SQL table with two columns.
So the plugin works great in this case.

I have a table named "param", its primary key is also named "param"
When I try to fill fields on Editor Generator web page and generate scripts I have the following error:
The primary key is automatically included by Editor and is not required in its own field.

And if I use my working example and rename columns name in js and php scripts I have the following error:
**DataTables warning: table id=table-param-detail - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1**

What is the correct way to use Editor with this SQL table?

Thanks in advance and have a nice day.

Good evening all,
I am quite new to working with web projects and datatable so go easy on me
I currently have a local project using datatables 1.10 with bootstrap 3, I would like to use the input.js pagination plugin: https://datatables.net/plug-ins/pagination/input

I need to somehow work out a way of creating the elements with the correct class name and as <li> elements instead of <span> elements but have not had much luck as of yet.

There is a working version for legacy but I have not had any luck with the new version of datatables: https://datatables.net/forums/discussion/comment/77724/#Comment_77724

has anyone had any luck with this or would be able to offer me any hints on how I could achieve this?

thanks.

I need to prevent a row from inline editing based on a data that is not displayed in grid, but available internally from ajax binding. Meaning some rows will be editable and some rows cannot be editable. The columns has different edit fields like dropdowns, checkbox list, text box etc.

Hello everyone,

i am now trying to modify the table before saving it as EXCEL and i don't know how to add two sentences before the table starts. For example add one new row before the table and input there a text. I am now using the following code to make the column G blue. I can use the customize ability, but no idea how

    buttons: [{
                        extend: 'excel',
                        text: 'Save in EXCEL',
                        filename: 'td900',
                        customize: function(xlsx) {
                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                           // $('c[r=A1] t', sheet).text( 'Custom text' );

                            // Loop over the cells in column `F`
                            $('row c[r^="G"] ', sheet).each( function () {
                                // Get the value and strip the non numeric characters

                                   if ( $( this).text() !== "needed Adjustment" ) {
                    $(this).attr( 's', '20' );
                }

                            });
                        }


                            }]

Hi

I am new to Datatables so still learning the basics. I have set up a table and all works fine until I disable the 'Search' feature. The reason I am disabling it is that I want to use individual column searching using a select field.

My code is below.

$(document).ready(function() {
    $('#mainTable').DataTable( {
        initComplete: function () {
            this.api().columns([2]).every( function () {
                var column = this;
                var select = $('<select><option value="">User Name</option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }, "paging":   false,
        "ordering": false,
        "info":     false,
        "searching": false
    } );
    } );

Any help would be great.

My datatables uses web api to deliver the data in JSON format.
After the page loads, the code makes the request and builds an array of data on return
like so
$.each(data, function (key, val) {
items.push(
[
val.ISIN
, val.Valoren
, val.FundName
, val.NAV
, val.NAV_Date
, val.CCY
, val.MasterAssetClass
, val.AssetClass
, val.GUID
]);
});

Once the data array is constructed, I load the datatable with the data, with these options.
I find that in chrome and firefox, the speed is very quick, but in IE its incredibly slow.
Im using the render options to format the column data but it still seems to apply the formatting to every single row even though the table only display 25 records.
If I comment out these options, the speed in IE is just as fast as chrome and firefox.

How can I only have the format apply to records in view?

$('#tgdFundResults').dataTable({
//paging: false,
//autoWidth:true,
pageLength: 25,
scrollY: 600,
data: items,
deferRender: true,
scrollCollapse: true,
scroller: true,
columnDefs: [
{ // The data parameter refers to the data for the cell (defined by the
// data option, which defaults to the column being worked with, in
// this case data: 0.
"render": function (data, type, row) {
//if the row data is not an empty string
if (data != '') {
var anc = '

<

div style="text-align:left;"><a class="opnSecurity" onclick="return false;" title="open fund info" data-guid="' + row[8] + '" href="funds/fundsFundInfo/?securityGUID=' + row[8] + '" target="window">' + data + '</a>';
return anc;
}
else { return ''; }
}, "targets": 2
}
, {
"render": function (data, type, row)
{ if (data != '') { return '<span style="float:right;">' + Number(data).toFixed(4) + '</span>'; } else { return '';}}
, "targets": 3
}
, {
"render": function (data, type, row)
{ if (data != '') { var dt = new Date(data); return dt.toLocaleDateString();} }
, "targets":4
}
, { "visible": false, "targets": [ 3 ] }
]
, initComplete: function (settings, json) { $('#preLoadingImg').hide(); }
});

I hope this is enough information for you all. If not please let me know what else you need to know

thanks in advance

Hi Allan,

We have select input fields which are multiple selection.
The problem is that the users has only two options:
1. Select one option.
2. Select several options in a row while holding the mouse button.

The problem is that some time you want to choose options that are not successive (A,C not A,B,C).
In other multi-select fields we know you can use the ctrl to do that, how can we achieve it in the Editor?

Thanks,
Yishay

Two dbf file, and their corresponding index files are not opened in the program. In the Windows can not be copied to another folder, rename, delete, just browse for F3 from TotalCommander. Files were stored on a portable hard drive. The impression is that in the course of the program, when recording information on the disc, there was a crashing on low level. Please tell me how (using what software) you can restore files?

Hi,
I use the datatable vbersion 1.10.11 in a intranet project (so I can't give you a link). I try to set a default sort on a special col. But it doesn't work. The default sort is everytime at col 1. What make I wrong?

    dTable = $('#uebersicht').DataTable({
        //
        "bDestroy":true,
        "cache":false,
        "ajax":{
            "url":"liste.php",
            "type":"Post"
            },
        "bSort":true,
        "aaSorting":[[2,'desc']],
        "bStateSave":false,
        "bProcessing":false,
        "bDeferRender":true,
        "bAutoWidth":false,
        "sPaginationType":"full_numbers",
        "sDom":'<"top"ilfpr>t<"clear">',
        "sScrollY":tabellenhoehe,
        "sScrollX":"100%",
        "iDisplayLength":25,
        "aLengthMenu":[
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "Alle"]
            ],
        "oLanguage":{
            "sUrl":"sprachen/dataTables.german.txt"
            },
        "aoColumnDefs":[{
            "bSearchable":true,
            "bVisible":true,
            "aTargets":[0]
            }],
        "aoColumns":[
            {"mData" : "Produkt"},
            {"mData" : "ID"},
            {"mData" : "KVNr", sWidth : "70px", "sClass" : "col_align_center"},
            {"mData" : "Liefertermin", sWidth : "70px", "sClass" : "col_align_center"},
            {"mData" : "Filiale", sWidth : "50px", "sClass" : "col_align_center"},
            {"mData" : "AB", "sClass" : "col_align_center"},
            {"mData" : "Avis", "sClass" : "col_align_center", "sType" : "german_date"},
            {"mData" : "WeDatum", "sClass" : "col_align_center", "sType" : "german_date"},
            {"mData" : "PosNr", "sClass" : "col_align_center"},
            {"mData" : "Kaufpreis", "sClass" : "col_align_right"},
            {"mData" : "Kundenname"},
            {"mData" : "PLZ", sWidth : "70px", "sClass" : "col_align_center"},
            {"mData" : "Lieferort"},
            {"mData" : "Lieferhinweis", sWidth : "150px"},
            {"mData" : "Team", "sClass" : "col_align_center"},
            {"mData" : "Einstufung", "sClass" : "col_align_center"},
            {"mData" : "Material", "sClass" : "col_align_center"},
            {"mData" : "Montagedauer", "sClass" : "col_align_center"},
            {"mData" : "LieferErläuterung"}],
        "fnInitComplete" : function(){
            //
            //    Produktspalte ausblenden
            //
            this.fnSetColumnVis(0, false);
            },
        });

Hello, I have a strange CSS problem that I cannot figure out. It seems that for some reason, CSS style code is being added inline on the page where I am using datatables, and it is coloring all of my text orange! I cannot find the specification in any CSS file, and it is not in my PHP, so it must be being added by javascript at render time, I am assuming by DataTables. Is that possible?

For example, I have an h2 element above my table, and when I load the page, a strong element has been added inside it, like this:

<h2><strong style="color: #ff6600; line-height: 1.5em;">Show Me By:</strong></h2>

And then the same thing is being added wrapped around my table definition. It is bizarre! Could something in my DataTables definition be adding this somehow? See the following URL to take a look:

http://ota.iewwritingteacher.com/registration-table/

Thanks for your help!

Hello ,

I want to custom pagination like attche image so how i can do this Please Help.

Thanks

language : {

        "oPaginate": {
            "sNext": ">",
            "sPrevious": "<",
            "sFirst": "|<",
            "sLast": ">|"
        },

    },

i know this but page number put in dropdown so how i can do this ???

Hello,

i came across this but this doesnt seem to have the answer there.
https://datatables.net/forums/discussion/30129/print-screen-or-multiple-tables-with-single-button

I have the similar situation. i have 2 data tables on same page and i want them to print on a single button click in a single view. how do i do it?

I noticed that when you have a complex data source, you cannot reliably use local table editing.

Repro: http://live.datatables.net/mayocawi/1/edit?js,console,output

1. Select a row
2. Click the edit button
3. Change the location
4. (Compare old value against new value in the table and console output)

Expected behavior
when changing the Location of a user, both the users.site and sites.name fields of a row are set to the selected value.

Actual behavior
only the users.site value is set to the selected value.

Example
"Pre-submit: site id = 2"
"Pre-submit: site name = London"
"Post-submit: site id = 3"
"Post-submit: site name = London"

I am very new to web development and need some help.

I want to provide the ability to export my table and print, while also display the option to change the number of rows per page. The problem is that my buttons are being displayed on top of my drop down menu.

<script>
$(document).ready(function () {
    $('#monthly').DataTable({

        "iDisplayLength": 25,
        "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],

        dom: 'Bfrtip',
        buttons: ['print', 'excelHtml5', 'csvHtml5'],

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }

    });
})
</script>

Thanks in advance for any help you can provide!

Is it possible to use this filed type without 'name' attribute?
In the docs described that this type is not submitted to the server but I see that empty data sent from this filed and got an error after form submit.