Hi,

Can anyone see what is wrong with this?
Following the example from : https://datatables.net/examples/api/multi_filter_select.html

The selects are appearing but the search is not doing anything. No errors in the console.

Thanks,

Mick

debug code: okixan

$(document).ready(function () {

            var table = $('#lookupTable').DataTable({

                initComplete: function () {
                    this.api().columns().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()
                                );

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

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


                responsive: true,

                @if ($pagination != 1)
                    "paging":   false,
                @endif


                @if($show_export_buttons === 1)

                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                @endif

                "processing": true,
                "pageLength": 25,
                "bFilter":   false,

                "columnDefs": [
                    {
                        "targets": [ -1 ],
                        "visible": false,
                        "searchable": false
                    }

                ],


                //This adds the Bootstrap alert class, if there is one in the last column
                "createdRow": function( row, data, dataIndex ) {

                    /*console.log(data);*/

                    if ( data[data.length-1] != '' ) {
                        $(row).addClass( data[data.length-1] );
                    }
                }




            });

            new $.fn.dataTable.FixedHeader( table );
            $('#loader').hide();
            $('#lookupTable').show();
        });

I migrated a working project from .net core 2.1 to 3.1 and I am now receiving this error from: jquery.dataTables.min.js
Uncaught TypeError: Cannot read property 'length' of undefined
I am fetching data from the database successfully but displaying it is causing this error.

I tried with both DataTables Editor v1.9.0 and DataTables Editor v1.9.2 and with both DataTables-1.10.19 and DataTables-1.10.20

I did it according to the instructions and got an example on my website:
https://sl19374928zzaljekswdf.vibory.pro/editor01/examples/simple/simple.html
But I would like to do this in a Joomla CMS. To make it work in a separate module.

This not so much a datatables question other than it is in a asp.net mvc project that has datatables in it. I am having the user import a text file into a datatable: https://editor.datatables.net/examples/extensions/import

After it is imported and they have reviewed the data, I need the user to click a button to call a stored procedure. The stored procedure is parsing the data and putting into another table, which is the datasource for another datatable. But the stored procedure itself does not return any data. From what I am researching, since datatables uses MVC i need to put that call in a controller.

    public class ParseImportDataController: ApiController
    {
        [HttpGet]
        [HttpPost]
        public IHttpActionResult cleanAndImport()
        {
            var request = HttpContext.Current.Request;
            var settings = Properties.Settings.Default;
            string AsOfCookie = request.Cookies.Get("AsOfDate").Value;

            string strCon = settings.DbConnection;
            SqlConnection DbConnection = new SqlConnection(strCon);
            DbConnection.Open();

            SqlCommand command = new SqlCommand("sp_ImportFTE", DbConnection);
            command.CommandType = System.Data.CommandType.StoredProcedure;
            command.Parameters.Add(new SqlParameter("@EffectiveDate", AsOfCookie));
            command.ExecuteNonQuery();
            DbConnection.Close();
            return Ok(1); //no idea what to return
        }
    }

I can't find out how I have the button click call this code in the controller. Any help would be greatly appreciated.

I have no idea if the code in the controller is correct, but I figure that will be the next struggle.

Editor Inline, input sent empty even he has value before edit
this wired because i have the same table but with diffrent parmas in other view that working fine with editor inline
in this view when i want to edit, Air_Fare_T.AirFare_Code_T always sent empty on inline edit

i have this serverSide code:

 [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
        public ActionResult GetDataAirFareTrip(int id)
        {
            var settings = Properties.Settings.Default;
            var formData = HttpContext.ApplicationInstance.Context.Request;

            using (var db = new DataTables.Database(settings.DbType, settings.DbConnection))
            {
                var editor = new DataTables.Editor(db, "Air_Fare_T", "Air_Fare_T_Id");
                editor.Where(q =>
                    q.Where("Air_Fare_T.AirFare_Costing_T_Id", "(SELECT AirFare_Costing_T_Id FROM Air_Fare_T WHERE AirFare_Costing_T_Id= " + id + ")", "IN", false)
                );
                editor.Model<ViewModel.AirFareTripEditorVM>("Air_Fare_T")
                   .Field(new Field("Air_Fare_T.Air_Fare_T_Id")
                    .Validator(Validation.Numeric())
                    .Set(false)
                )
                 .Field(new Field("Air_Fare_T.AirFare_Costing_T_Id")
                    .Validator(Validation.Numeric())
                )
                .Field(new Field("Air_Fare_T.AirFare_Code_T").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null))
                )
                .Field(new Field("Air_Fare_T.Air_Fare_T_Type").Xss(true)
                .Validator(Validation.Numeric())
                .Options(new Options()
                        .Table("AirFare_Trip_Type")
                        .Value("AirFare_Trip_Type_Id")
                        .Order("AirFare_Trip_Type.AirFare_Trip_Type_Id")
                        .Label("AirFare_Trip_Type_Name")
                )
                .SetFormatter(Format.IfEmpty(null))
                )
                .Field(new Field("Air_Fare_T.Air_Fare_T_Currency").Xss(true)
                .Validator(Validation.Numeric())
                .Options(new Options()
                        .Table("CurrencyCosting")
                        .Value("Currency_Id")
                        .Order("CurrencyCosting.Currency_Id")
                        .Label("Currency_Name")
                        )
                .SetFormatter(Format.IfEmpty(null)))
                .Field(new Field("Air_Fare_T.Air_Fare_T_Price").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null)))
                .Field(new Field("Air_Fare_T.Air_Fare_T_PAX").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null)))
                .Field(new Field("Air_Fare_T.Air_Fare_T_Total").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null)));
                editor.Model<ViewModel.CostingAirlineEditorVM>("Costing_Airlines")
                .LeftJoin("Costing_Airlines", "Costing_Airlines.Airline_Id", "=", "Air_Fare_T.AirFare_Code_T");
                editor.Model<ViewModel.AirFareTripTypeEditorVM>("AirFare_Trip_Type")
                .LeftJoin("AirFare_Trip_Type", "AirFare_Trip_Type.AirFare_Trip_Type_Id", "=", "Air_Fare_T.Air_Fare_T_Type");
                editor.Model<ViewModel.CurrencyCostingEditorVM>("CurrencyCosting")
                .LeftJoin("CurrencyCosting", "CurrencyCosting.Currency_Id", "=", "Air_Fare_T.Air_Fare_T_Currency");

                // Post functions
                editor.PreCreate += (sender, e) =>
                {
                    var totalVal = getTotalValTrip(e.Values, id);
                    editor.Field("Air_Fare_T.Air_Fare_T_Total").SetValue(totalVal[1]);
                    editor.Field("Air_Fare_T.Air_Fare_T_Price").SetValue(totalVal[0]);


                };
                editor.PreEdit += (sender, e) =>
                {
                    var totalVal = getTotalValTrip(e.Values, id);
                    editor.Field("Air_Fare_T.Air_Fare_T_Total").SetValue(totalVal[1]);
                    editor.Field("Air_Fare_T.Air_Fare_T_Price").SetValue(totalVal[0]);


                };
                editor.Process(formData.Unvalidated.Form);
                DtResponse data = editor.Data();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }

Hi
The 1st editor form uses the standard create, edit and remove extensions but form #2 gets called from a custom button. DT and editor form #1 share the same Ajax method. Form #2 has a different Ajax method that should not refresh the DT as the data it handles is different background data the user can edit but not see directly via the DT. He needs to click the custom button to view and edit that data. The forms handle data across 2 different tables who share the same foreign key.

var editor2 = ModifyCustomerSubPackSNsAssociations_editor();

(DT code)

            buttons: [
                { extend: 'create', editor: editor1 },
                { extend: 'edit', editor: editor1 },
                { extend: 'remove', editor: editor1 },
                {
                    text: '@(lblo.lblAssociatedSNs)',
                    extend: 'edit', editor: editor2
                }
            ],

Code for ModifyCustomerSubPackSNsAssociations_editor:

    function ModifyCustomerSubPackSNsAssociations_editor() {

        var editor = new $.fn.dataTable.Editor({

            destroy: true,
            ajax: {
                url: '/CustomerSubsPacks/CRUDCustomerSubsPacksSNs/',
                data: function ( d ) {
                    return $.extend( {}, d, {
                        intContTpe: intContTpe1
                    } );
                },
                type: 'POST',
                async: true,
                cache: false
            },
            table: '#tblDataTable',
            fields: [
                {
                    label: '',
                    name: 'CustomerSubsPacksSNs.id'
                }, {
                    label: '@(lblo.lblServiceNumbers):',    //cdr formats and price lists don't show ticked when opening editor
                    name: 'CustomerSubsPacksSNs[].id',    //SNs
                    type: "checkbox"
                }
            ]
        });

        return editor;
    }

How do I reference editor2 correctly? The form opens but ajax method CRUDCustomerSubsPacksSNs never gets hit when form opens. Browser console does not throw any errors. Thanks.

I have problem with getting Bootstrap to play with DataTables and flex in phone-mode using an Android Phone in Chrome. With iOS there is no problem. Have a look at the screenshot taken from
https://datatables.net/examples/basic_init/flexible_width
The table stretches out of the grid. Any suggestion for getting it to stay inside?

Hello,
I've added date time picker on a custom field within the editor, but the problem that every time I trigger an error on that composite field, the picker displays even there's no error with the date itself.
I've done it like so:

new Editor.DateTime($('input.date', this), $.extend({
                    format: conf.format, // can be undefined
                    i18n: that.i18n.datetime,
                    onChange: function () {
                        $('input.date', self).trigger('input');
                        $('input.date', self).trigger('change');
                    }
                }, conf.opts));

How I can disable datetime picker from being shown completely even if there's an error with the date field?
Thanks in advance.

How can i change the position of my checkbox filter beside the buttons?

Hi,

Can anyone see what is wrong with this?
Following the example from : https://datatables.net/examples/api/multi_filter_select.html

The selects are appearing but the search is not doing anything. No errors in the console.

Thanks,

Mick

debug code: okixan

$(document).ready(function () {

            var table = $('#lookupTable').DataTable({

                initComplete: function () {
                    this.api().columns().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()
                                );

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

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


                responsive: true,

                @if ($pagination != 1)
                    "paging":   false,
                @endif


                @if($show_export_buttons === 1)

                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                @endif

                "processing": true,
                "pageLength": 25,
                "bFilter":   false,

                "columnDefs": [
                    {
                        "targets": [ -1 ],
                        "visible": false,
                        "searchable": false
                    }

                ],


                //This adds the Bootstrap alert class, if there is one in the last column
                "createdRow": function( row, data, dataIndex ) {

                    /*console.log(data);*/

                    if ( data[data.length-1] != '' ) {
                        $(row).addClass( data[data.length-1] );
                    }
                }




            });

            new $.fn.dataTable.FixedHeader( table );
            $('#loader').hide();
            $('#lookupTable').show();
        });

Hello i have tried the following...

buttons: [
{ extend: 'searchPanes', text: 'colunas' }
]

I am using the Buttons plug-in to allow users to mark columns as hidden after accessing the datatable. While navigating the website, whenever I come back to a table that I have changed, the columns I selected remain hidden. Is there a way to have these change apply for other tables in the website that use the same columns?

Ideally I would like all tables with the same column names to change their views when the "Hide/Show" columns settings are changed. How do I control this?

I have three datatables on a page that each have the first column having '.details-control' item. Instead of having three different onClick functions I would like to make just one. To do that, I need:

1) the onClick to know what datatable is clicked
2) I need to access the third data element for each table instead of hard-coding the field name since for each table the field name will be different.I tried data[0][3] as well as data[0,3] and even data[3]. None of these worked.

What is the syntax for each of these two items?

        $('.display tbody').on('click', '.details-control', function (e) {
            e.preventDefault(); //TODO: not working!!!!!!!!! Don't want to select/deselect when .details-control is clicked
            var data = dependencytable.row($(this).parents('tr')).data();   //don't want to hardcode the tablename
            alert(data["Dependencies"]["note"]);            //don't want to hardcode the data element name
        });

I have created a .NET PostCreate event that needs to be fired after a new user is created in my web app. I use the AspNet.Identity UserManager to handle sending out confirmation / change password email after the account is created inside the postCreate event. I am also setting some user roles, so I need to keep Transactions on. The issue is that the PostCreate event is fired before the Transaction is committed to the database. So when the UserManager is called to lookup the user, the user hasn't been saved to the database yet (transaction not committed). Ideally, the postcreate event wouldn't fire until the transaction has been committed. Is there a work around for this?

Hello everyone, I'd like to know how to customize PDF or Excel when I export it.

Hi,

I have this file called table.ref.php that sets up the editor for my list of references (as in journal articles) in table 'ref' like so:

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'ref', 'id' )
    ->fields(
        Field::inst( 'id' ),
        Field::inst( 'author' ),
        Field::inst( 'year' ),
        Field::inst( 'title' ),
        Field::inst( 'journal' ),
        Field::inst( 'etcetera' ),
        Field::inst( 'count' )->getValue( 9 ),
        Field::inst( 'user' )
    )
    ->where( 'user', $_SESSION['user'] )
    ->process( $_POST )
    ->json();

Now for the field 'count' I would like to return the number of times each reference is used in another table called 'cases'. Each case only ever has one reference, but one reference can be used for multiple cases. Is there an easy way to replace the number 9 in above code snippet with the actual number of cases that the reference is cited for?

Hi all,

with the help of the community I was able to put a multi filter search in the head of a table. But with using the colvis function, this filter doesn't communicate with the columns. As you see in the example they indeed reduce from e.g. four to three columns, but the search function doesn't go with the colvis function. The function stays in the original column.
https://jsfiddle.net/RoloTomasi/vhp3fjxd/6/
Any ideas?

Thanks in advance
Rolo

Hello I need to add a placeholder in the search input that comes with each data table does anybody know how ?

<b>I have already tried with :</b>
oLanguage:
{
sSearch: '<em class="fas fa-search"></em>',
searchPlaceholder: "Search records"
}

Hi,

I am searching this for a long time and I found nothing.

I would like to display a column instead of a row after searching for something.

For example, when i search 'Satou' here , i would like to see all the column Name because Airi Satou belong to the column Name ( instead of seeing the row for the Name/ Position/Office/etc. )

I'm really stuck, i really appreciate some helps, thank you

I apparently visited a website advertising a product. I deleted the tab in the browser and I now get this error message 2-3 times in succession when I open my Firefox browser.

How do I stop this? It is annoying!