hi dear

I use R program. and want apply DataTables on this, do u have source recommend to me for reading?

thanks so much

When using chrome clicking in a content box and dragging to highlight text closes the modal if the user releases the mouse outside of the content div. This issue is only tested using bootstrap display.

This has an easy fix of changing on click binds to mousedown in editor.bootstrap.js and editor.bootstrap4.js;

Specifically

$(document).on('click', 'div.modal', function (e) {
    if ( $(e.target).hasClass('modal') && self._shown ) {
         self._dte.background();
    }
} );

should be changed to

$(document).on('mousedown', 'div.modal', function (e) {
    if ( $(e.target).hasClass('modal') && self._shown ) {
         self._dte.background();
    }
} );

Hello, I have been using DataTables for a while now and is fantastic but have a query which I am unable to resolve. My data is in pairs (odd + even) in a repeating pattern. Using a responsive table, the modal shows whatever column you click (eg, row 1) but I would like to show the pair (1+2 or 3+4, 5+6 etc). If the odd row is clicked it shows the even number following also and if the even row is clicked it shows the previous odd row in the modal.

Is this possible to achieve?

Thanks in advance.

Tengo en mi navbar un buscador con diseño personalizado, lo que me gustaría es poder utilizarlo y esconder el que trae datatable por defecto, algun ejemplo lo agradeceria.

Hi,

What is the easiest way to add an autocomplete select?

Has anyone got an example?

Using Select2?

Just found this:

https://editor.datatables.net/plug-ins/field-type/editor.autoComplete

The list of options needs to come from a MySQL table.

Thanks,

Mick

EDIT: Almost got this working now, just need to change the source to get the data from the DB.

Something like this maybe.

"opts": {
                                    "source": function( request, response ) {
                                      $.getJSON("/autocomplete/faults", {
                                        term: extractLast(request.term)
                                    }, response);
                                    }
                                }

From: https://jqueryui.com/autocomplete/#multiple-remote

I have some conditional formatting in my

rowCallback: function(row, data, index) {....}

I also have an additional button:

{
text: 'Click Here',
action: function ( e, dt, node, config ) {
table.draw(); <--- this only redraws the table and never run rowCallback
//rowCallback.
}
}

I need the table to refresh and rowCallback to run its conditional formatting

Many Thanks!

Hi,

I want to use Datatable in my mediawiki site; but I don't know how to make it. I am really appreciated if anyone could give me some document or tutorial.

Thank you so much for your support.

Hi,

Loving the new release, brings in some excellent new features. A couple of things I've noticed:

1. columns-6
   Still using the beta searchpane on a specific table as we have 9 selection boxes across the top. Having it flow to 2 rows in the searchpane takes up too much space. Any chance this can be expanded?

2. columns-4 to 6
   Using the standard UI, when I increase above 3 columns the pane controls drop to a second line as it seems the search box takes up the entire top row, which leads to point 3.

3. pane controls
   Can we have an option to remove the search as well as order, just leaving the 'x' to clear?

4. A bug
   I have a table with an external date selector, that modifies the ajax url, eg ajax_data.php?date=2020-02-28
   Works without issue until someone selects 2 dates that have no data. It then throws this error in the console and stops working until the page is refreshed:
   Uncaught TypeError: Cannot read property 'scrollTop' of undefined
   at f._updateCommon (datatables-1.10.20.min.js:452)
   at f.updatePane (datatables-1.10.20.min.js:426)
   at b.redrawPanes (datatables-1.10.20.min.js:464)
   at HTMLTableElement.<anonymous> (datatables-1.10.20.min.js:472)
   at HTMLTableElement.dispatch (jquery-3.4.1.min.js:2)
   at HTMLTableElement.v.handle (jquery-3.4.1.min.js:2)
   at Object.trigger (jquery-3.4.1.min.js:2)
   at HTMLTableElement.<anonymous> (jquery-3.4.1.min.js:2)
   at Function.each (jquery-3.4.1.min.js:2)
   at k.fn.init.each (jquery-3.4.1.min.js:2)

You can select a date with no data once, back to data, etc without issue. Only occurs when you hit zero data twice in a row. Haven't tested outside of this single table/data source. Below is the code once the ajax is updated to reload, rebuild and adjust column width:
dt.ajax.url('ajax.php?date='+data).load( function() { dt.searchPanes.rebuildPane(); dt.columns.adjust().draw(); } );

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?)

Hi All
I have seen the following discussion back in 2015 (https://datatables.net/forums/discussion/28700/multi-nested-child-rows) which was basically just closed. Is there an update to this. Is there a way to multi-nest datatables. I have found plenty of examples of parent/child which work fine as child is usually a simple table construction but I have not seen any with parent/child/child-of-child/ etc.
Harj

I wan't to prevent submit if all selected field is empty
My view like this

1.

2.

3.

I wan't to prevent from submit when this red square on picture is empty

I'm trying to use RowGroup extension but i noticed that if applied on a cell that has a custom render function, the group will be created with the row data, not with the rendered one. Is there a way I can show the rendered data instead?

Also, how can I start the extension as disabled and enable it only via UI? Like only after a click over a button or something like that?

I'm working on a search plugin to filter duplicate data from the visible rows. If I use the search input I see that the plugin is executed once for each visible row when using draw(). However if I use SearchPanes to filter the table then the plugin is executed once for each row, visible or not, in the table when using draw().

Is this expected behavior with SearchPanes?

Is there a way in the search plugin to know if the row is visible so I know with to ignore it or use it when checking for duplicates? Or a way to know Search Panes performed the draw to skip the plugin altogether?

Do you want a test case?

Kevin

Is it possible to add a table of content to a list on page 1 which contains names and titles of the bio
pages 2 and on are bios

page 1 has the list- list data in :
name1
name2
name3
Page 2 and on contains bio of these names some bios will be 1-3 pages

I've a datatable with same editable column, All calumns are bind with datasource

var editor;
function jsFunctionCalcolaQtaCo(data, type, full, meta) {

    data = full.Qtagg / full.ConfezioniXCollo;

    editor.field(meta.settings.aoColumns[meta.col].mData).val(data);
    editor.submit();

    return Math.round(data);
}
function jsFunctionCalcolaQtaKg(data, type, full, meta) {
    data = full.Qtagg * full.PesoXPezzo;

    return Math.round(data);
}
$(document).ready(function () {

        editor = new $.fn.dataTable.Editor({
            table: '#tableOrdineFornitoreEdit',
            idSrc: 'CdArticolo',
            fields: [                            
                        {
                            "name": "CdArticolo",
                            "label": "Cd. Articolo",
                        },                                                        
                        {
                            "name": "DsArticolo",
                            "label": "Descrizione",
                        },                                                        
                        {
                            "name": "CdStato",
                            "label": "Stato",
                        },                                                        
                        {
                            "name": "CdUm",
                            "label": "U.M.",
                        },                                                        
                        {
                            "name": "Qtagg",
                            "label": "Qta",
                        },                                                        
                        {
                            "name": "QtaCo",
                            "label": "QtaCo",
                        },                                                       
                        {
                            "name": "QtaKg",
                            "label": "QtaKg",
                        },                                                       
                        {
                            "name": "ImNetto",
                            "label": "Prezzo",
                        },                                                        
                        {
                            "name": "IsOrdinabile",
                            "label": "Ordinabile",
                        },                            
            ],
            formOptions: {
                inline: { onBlur: true }
            }
        });

    //datatable definition
   $('#tableOrdineFornitoreEdit').dataTable({
            dom: 'Bfrtip',                            
            ajax: {
                type: "POST",
                data: function (d) {
                    var _data = { 'StringSearch': JSON.stringify({ pCdFornitore: 9110 }) };
                    return _data;
                },

                url: App.getGlobalWcfErgonPath() + "GetPropostatOrdineFornitore",
                dataType: "jsonp",                               

                contentType: "application/json; charset=utf-8",
                dataSrc: function (json) {
                    var parseJson = JSON.parse(json.Data);
                    if ('data' in parseJson && parseJson.data.length == 0) return;
                    var f = "loadOrdineFornitore" + "(json.Data);"
                    return eval(f);

                }
            },

        "filter": true,"info": false,"ordering": true,"processing": true,"retrieve": true,            
          order: [[0, 'asc']],
        responsive: true,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json"
        },
        columns: [
            {                            
                        "data": "CdArticolo",
                        "type": "text",                            
                "title": "Cd. Articolo",
                "className": "dt-center",
                "orderable": true,
                "visible": true,
            },

            {                          
                        "data": "DsArticolo",
                        "type": "text",
                    "title": "Descrizione",
                "className": "dt-left",
                "orderable": true,
                "visible": true,
                "render": function(data,type, full, meta) {
                   return jsFunctionDescrizione(data, type, full, meta); },
            },                
            {    
                        "data": "CdStato",
                        "type": "text",
                  "title": "Stato",
                "className": "dt-left",
                "orderable": false,
                "visible": true,
            },            
            {
                         "data": "CdUm",
                        "type": "text",
                        "title": "U.M.",
                "className": "dt-left",
                "orderable": false,
                "visible": true,
             },

            {    
                        "data": "Qtagg",
                        "type": "text",
                                 "title": "Qta",
                "className": "dt-right editable",
                "orderable": false,
                "visible": true,
    },

            {
                        "data": "QtaCo",
                        "type": "text",
                "title": "QtaCo",
                "className": "dt-right editable ",
                "orderable": false,
                "visible": true,
                 "render": function(data,type, full, meta) {
                                  return jsFunctionCalcolaQtaCo(data, type, full, meta); },
            },

            {   "data": "QtaKg",
                        "type": "text",
                "title": "QtaKg",
                "className": "dt-right editable ",
                "orderable": false,
                "visible": true,


                "render": function(data,type, full, meta) {
                         return jsFunctionCalcolaQtaKg(data, type, full, meta); },
            },

            {       "data": "ImNetto",
                        "type": "text",
                "title": "Prezzo",
                "className": "dt-right",
                "orderable": true,
                "visible": true,
                "render": function(data,type, full, meta) {
                     return jsFunctionImportoNetto(data, type, full, meta); },
            },

            {    "data": null,
                        "defaultContent": '',
                  "title": "Importo",
                "className": "dt-right",
                "orderable": false,
                "visible": true,
              "render": function(data,type, full, meta) { 
                  return jsFunctionCalcolaImporto(data, type, full, meta); },
            },

            {      "data": "IsOrdinabile",
                        "type": "text",
        "title": "Ordinabile",
                "className": "dt-right",
                "orderable": false,
                "visible": false,
       },
                         ],
       select: true,
       keys: {
           columns: '.editable',
           keys: [9],
           editor: editor,
           editOnFocus: true
       },

           initComplete: function (settings) {
                var f = "JsAddToHeader" + "(settings);"

                eval(f);
            },

    });

});

i try to change the value of editor, but not working and when i go to modify the value i've the old value and not the new. the new value is only on datatable, i saw the new display, but i can't modify?
Someone can help me?

Hello,
I saw SearchPanes extension which looks absolutely awesome - however, I am struggling with an issue to make it work properly in my ASP NET Core MVC App.

I have a datatable that is rendered from a model by razor (i.e. without ajax). Some of the cells of the datatable contain a content like that:

<span class="badge badge-primary">SomeText</span>

These are bootstrap badges. Unfortunately, this does not render properly as an option in the search pane label. I wonder whether it is possible to dynamically render the labels (e.g. extract only text from the span etc).

So far I only see a way to predefine label text which is not optimal...

Kind regards

Ran into a new unusual problem when creating a DataTable as a child row and utilizing SearchPanes in both the "parent" table and the created "child" table.

When a table is created as a child row with it's own searchPanes button, it duplicates the searchPanes selectors of the original parent DataTable.

Example here: live.datatables.net/vemimali/1/edit?html,js,output

If you click the "name" column it displays a child row which is itself a DataTable with a searchPane button. The button on the child DataTable works as expected (the example doesn't have any data).

However, after the creation and destruction of the child row, when clicking the searchPane button for the original table the options for the original table are duplicated, and only one of them works. This occurs each time a new child table is created then destroyed.

I'm unsure if there is something I'm doing incorrectly to cause this or if it's a bug. You can see in the code, I've attempted to call the searchPane rebuildPane() function on the main table to try to resolve but it doesn't seem to have any affect.

Hello,
For now i show a modal when the user click on the line but i want to give him the possibility to do it on the row.
Is there a way to define the render of some columns as input type text ?

Thanks in advance

Hi, I have a project I am working which has a Bootstrap Modal popup (Modal 1) which in turn display records using dataTables. this works fine. On the same page I have a tabbed menu (Tab 2) and one of the tabs also displays the same data as the Modal popup.
If a record is selected from the tabbed list another modal pops up allowing editing or deletion of the record. If I delete the record the tabbed menu item is refreshed and the record is not displayed (deleted).

If I then open modal 1 the deleted record is still displayed, it only gets removed from the record list if I refresh the page. I have an Ajax process that deletes the record and in the success: function I have the following code

         success: function(data){
          $('#WayFinderStatusTable').DataTable().ajax.reload(); // Reloads the main Tab data
          $('#wayfinderSignageTableTab').DataTable().ajax.reload(); //Reloads the Tab 2 
          $('#wayfinderSignageTable').DataTable().ajax.reload(); Should reload the Modal 1 data.
            }

At the point of the record deletion the Modal 1 is hidden.

Should this work or am I going about this wrong.
Many thanks in advance for your help and time

I want to use drop down list to select the Status option and hold the selected option without submit button. But, I am getting error

jquery-3.2.1.min.js:2 jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (http://localhost:37170/Pages/Tasks.aspx:560:26)
at j (http://localhost:37170/Content/lib/jquery/Scripts/jquery-3.2.1.min.js:2:29999)
at k (http://localhost:37170/Content/lib/jquery/Scripts/jquery-3.2.1.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery-3.2.1.min.js:2
jquery-3.2.1.min.js:2 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (Tasks.aspx:560)
at j (jquery-3.2.1.min.js:2)
at k (jquery-3.2.1.min.js:2)

This is my code

         var editor = new $.fn.dataTable.Editor({
            ajax: '/path/retreivedetails/' + status.id,
            table: "#datatable",
            fields: [
                    {
                    "label": "Assign To", "name": "Task_AssignTo"
                },{
                    "label": "Customer", "name": "Task_ContactName"
                },{
                    "label": "Company", "name": "Task_ContactCompany"
                },{
                    "label": "Project", "name": "Task_Project"
                },{
                    "label": "Tasks", "name": "Task_Name"
                },{
                    "label": "Priority", "name": "Task_Priority"
                },{
                    "label": "Due Date", "name": "Task_DueDate"
                },
                  {
                  name: "Status",
                  type: "select",
                  options: [
                        { label: 'Not Started', value: 'Not Started' },
                        { label: 'Deferred', value: 'Deferred' },
                        { label: 'In Progress', value: 'In Progress' },
                        { label: 'Completed', value: 'Completed' },
                        { label: 'Waiting for input', value: 'Waiting for input' },
                  ]
                }
            ]
        });

        var table = $('#dataTable').DataTable({
            "ajax": {
            "url": '/path/retreivedetails/' + status.id,
            "dataSrc": function(json) {
                   return json.data;
            }
        },

            aaSorting: [],
            lengthChange: false,
            columns: [
                { data: "id" },
                { title: "Assign To", data: "Task_AssignTo" },
                { title: "Customer", data: "Task_ContactName" },
                { title: "Company", data: "Task_ContactCompany" },
                { title: "Project", data: "Task_Project" },
                { title: "Tasks", data: "Task_Name" },
                { title: "Priority", data: "Task_Priority" },
                { title: "Due Date", data: "Task_DueDate" },
                { title: "Status", data: "Task_Status" },
                { title: "", width: "40px" },
                { title: "", width: "40px" }
            ],
            columnDefs: [
                {
                    targets: [0],
                    responsivePriority: 1
                },
                {
                    targets: [0, 1],
                    render: function (data, type, full, meta) {
                        if (!data)
                            return "";
                        else
                            return "<div class='text-wrap width-150'>" + data  + "</div>";
                    }
                },
                {
                    targets: [-2],
                    responsivePriority: 2,
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<a href="#" class="update" data-toggle="modal" data-target="#editModal" data-id="' + full.Task_ID + '">Edit</a>';
                    }
                },
                {
                    targets: [-1],
                    responsivePriority: 3,
                    orderable: false,
                    render: function (data, type, full, meta) {
                        return '<a href="#" class="delete" data-toggle="modal" data-target="#deleteModal" data-id="' + full.Task_ID + '">Delete</a>';
                    }
                }
            ],
            "rowCallback": function (row, data, index) {

                if (data["Task_StatusID"] == "1") {
                    $('td:eq(7)', row).css('color', '#FF3838');
                    $('td:eq(7)', row).css('font-weight', 'bold');
                } else if (data["Task_StatusID"] == "2") {
                    $('td:eq(7)', row).css('color', '#8B8B8B');
                    $('td:eq(7)', row).css('font-weight', 'bold');
                } else if (data["Task_StatusID"] == "3") {
                    $('td:eq(7)', row).css('color', '#5CA6FF');
                    $('td:eq(7)', row).css('font-weight', 'bold');          
                } else if (data["Task_StatusID"] == "4") {
                    $('td:eq(7)', row).css('color', '#358424');
                    $('td:eq(7)', row).css('font-weight', 'bold');
                } else if (data["Task_StatusID"] == "5") {
                     $('td:eq(7)', row).css('color', '#FFC300');
                     $('td:eq(7)', row).css('font-weight', 'bold');
                }
            },

           ajax: {
                url: "../WS/wsTasks.asmx/GetTasksListSearch",
                type: 'POST',
                data: function (d) {
                    d.userID = getCookie('UserID');
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText + ":  " + error);
                },
            }
        });

        $('#datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this, { submitOnBlur: true } );
        });