Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 81702 articles
Browse latest View live

If checkbox in the editor field became selected, change the content of the editor field and store it

$
0
0

Hello everybody

I've been sitting on a more complex topic for days.

I have a lot of input fields with prices in an editor form (e.g. db.reg_price and db.red_price). You can enter this by hand. Underneath there is the possibility to activate a checkbox. If this has been activated, the array should be taken from another table with these prices (reg_price and red_price without db. ).

Up to this point, this also works very well. Even the data in the table contain the values (reg_price and red_price) after saving the form. BUT! These values are not updated in the database in the original variables (db_reg_price and db_red_price). Only when you go into the editor field again and save again, does it take the values into the database.

  1. Is there a possibility to update both variables with this new values from the second table?

I made some tests with ->on('preEdit', function and also with postEdit and so on in the staff.php. Also with editor.on( 'preSubmit', function in the Javascript. But I don't find the right solution.

  1. Is there a possibility to block the fields in editor form if the checkbox were activated?

I'll be at one's wit's end....

Thanks a lot.
Mac

Javascript:

var editor; 

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
fields: [
   {
                type: "select",
                label: "Select price package:",
                name: "event.db_price_select_form",
                placeholder: "Please select"
            }, {
                label: "Regular price:",
                name: "event.db_reg_price",
                fieldInfo: "Format: 16.00",
                    
                }, {
                label: "Reduced price:",
                name: "event.db_red_price",
                fieldInfo: "Format: 16.00",
            },
.....

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

 columns: [
            
            { data: "event.db_price_select",
                render: function (data, type, row) {
                    if (row.event.db_price_select == 1) {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                }
            },
            { data: "event.name_price_pack" },

            { data: "event.db_reg_price",
            render: function (data, type, row) {
                    if (row.event.db_price_select == 1) {
                        row.event.db_reg_price = row.price.reg_price;
                        return row.price.reg_price;
                    } else {
                        return row.event.db_reg_price;
                    }
                }
            },
......

staff.php:

......
        Field::inst( 'event.db_price_select_form' )
            ->options( Options::inst()
                ->table( 'price' )
                ->value( 'id' )
                ->label( array ( 'name_price_pack', 'reg_price', 'red_price' ))
            )
            ->validator( Validate::dbValues() ),
            Field::inst( 'price.name_price_pack' ),
            Field::inst( 'price.reg_price' ),
            Field::inst( 'price.red_price' ),

        Field::inst( 'event.db_reg_price' ),
        Field::inst( 'event.db_red_price' ),

->leftJoin( 'price', 'price.id', '=', 'event.db_price_select_form' )

.....


input with datalist

Formatting is off in datatables

$
0
0

Not sure where I've gone wrong, here's the issue:
enter image description here

Here's my code:

<?php

require 'config.php';

?>
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" href="assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>Vendor list - VendorBase Pro</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

    <!-- Bootstrap core CSS     -->
 <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>   






    
    <!-- Bootstrap core CSS     -->
    


    <!-- Animation library for notifications   -->
    <link href="assets/css/animate.min.css" rel="stylesheet"/>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <!--  Light Bootstrap Table core CSS    -->
    
    <link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>

<link href="DataTables/DataTables-1.10.20/css/jQuery.dataTables.css" rel="stylesheet"/>
    <!--  CSS for Demo Purpose, don't include it in your project     -->

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
    <link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<style>

td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}


  td {
      overflow:hidden;
      table-layout: fixed;
      max-width: 500px;
    overflow-wrap:break-word;
      }


</style>

<body>
</body>
<script>
function format ( d ) {
 
    return '<table>'+
        '<tr>'+
            '<td><b>Business Owner:</b></td>'+
            '<td>'+d.owner+'</b></td>'+
        '</tr>'+
        '<tr>'+
            '<td><b>Contact Email:</b></td>'+
            '<td>'+d.owner_email+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td><b>Description:</d></td>'+
            '<td style="max-width=280px;">'+d.descr+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>More Info:</td>'+
            '<td><button>View</button></td>'+
        '</tr>'+
    '</table>';

}


$(document).ready(function() {
    var dt = $('#tblVendor').DataTable( {
        "responsive": true,
        "dom": 'Bfrtip',

        "buttons":[
         { extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
         { extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
         { extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
         { extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' }
        
            
    ],

        "processing": true,
        "serverSide": true,
        "ajax": "ajax.php",
        'serverMethod': 'post',
        "columns": [
            {
                "width": "5%",
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
                
            },
            { "data": "name" },
            { "data": "company" },
            { "data": "type" },
            { "data": "status" },
            { "data": "owner", "visible": false},
            { "data": "owner_email", "visible": false},
            { "data": "descr", "visible": false},
            { "data": "dept" },
            
           
        ],  "order": [[1, 'asc']],
        
      
    } );
    
        new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                className: 'btn btn-info btn-fill',
                text: 'Add New Vendor',
                action: function ( e, dt, node, conf ) {
                    window.location.replace("new.php");
                },
                

            },

        ]
        
    } );

    // Array to track the ids of the details displayed rows
    var detailRows = [];
 
    $('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();
 
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );
 
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#tblVendor'+id+' td.details-control').trigger( 'click' );
        } );
    } );

    dt.buttons( 1, null ).container().appendTo(
        dt.table().container()
    );

} );
</script>

I have literally tried everything, even searching through CSS (no changes permanently made) and making changes to color schemes and what not. There literally is nothing that has worked so I'm reaching out to you guru's to see where I'm going wrong. I'm hoping it's just a silly oversight and no drastic changes but I'm open to anything.

EDIT (Body redacted so code fit)

SearchPanes - Feedback and Requests

$
0
0

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(); } );

Compare data values with ajax

$
0
0

I want to compare extn values ​​in ajax.

example1, extn value greater than 5000, this row load.
example2, extn value is 5000 or less, this row load.

Eventually,
example1
Name Position Office salary extn
Herrod Chandler Sales Assistant San Francisco $137,500 9608
Quinn Flynn Support Lead Edinburgh $342,000 9497
...

example2
Name Position Office salary extn
Brielle Williamson Integration Specialist New York $372,000 4804
Zorita Serrano Software Engineer San Francisco $115,000 4389
....

This is the answer I want.
https://jsfiddle.net/zvamLqdc/2/ my jsfiddle.

What's the way? please help. thanks.

Add customize function to DataTable print button after initialization?

$
0
0

I'm trying to customize a web app that allows custom javascript to be added.

I'm trying to set the CSS for the print button (https://datatables.net/extensions/buttons/examples/print/customisation.html), but I cannot set the "customize" parameter of the button, because the webapp has already initialized everything.

I can access the button through JavaScript, but I tried attaching a function like this:

$(document).ready(function() {
table.buttons('.buttons-print').customize = function(){ alert("TEST") };
});

but it simply doesn't work. I'm clearly missing something.

I tried checking the source code for the print button ( https://github.com/DataTables/Buttons/blob/master/js/buttons.print.js ) but that didn't clear anything up for me.

Does anyone know if what I'm trying to accomplish is possible?

Data table load issue

Why is the data in the table not aligned properly?

$
0
0

my page is http://izumov.ultimatefreehost.in/goods007.html
When initiating, for example, I tell the data in the 2nd column to be centered

"columnDefs": [
        {"sWidth": "136px", "aTargets": [ 0  ] }, //код
        {"sWidth": "136px", "aTargets": [ 1  ],className:'dt-body-center' }, 

and left alignment is displayed. What is my mistake?


How to disable a checkbox depending on cell value ?

$
0
0

Hello, I have dinamic tables and its rows always have in the first column a checkbox to select the entire row and its info.
My problem is that in a specific cell of every row, the data may be different, and depending on that, I have to " disable / prevent / forbid " the user to select that row.

I implemented the buttons: "Excel", "selectAll" and "selectNone"
Also implemented: "select-checkbox"

I use this: table.on('user-select', function (e, dt, type, cell, originalEvent)
and: e.preventDefault(); as a result when the value of cell is 'B'
also try: return false;
but is not working. The result is that as soon as the first 'B' option appears, the entire table disables clicking the checkbox of every row, no matter if it is 'A' or 'B', and clicking the 'Select All' button still works and checks everything, even the 'B' row, when it shouldn't.

So:
- if the cell data in a row is 'A', the user can use the checkbox by clicking the checkbox or click the 'Select All' button
- if it is 'B', the user can't use the checkbox, neither clicking on checkbox nor click on 'Select All' button

Hope you can help me, thanks in advance!!!

When using ServerSide I am not page

$
0
0

I want to use serverSide since I charge about 70K data and that proves that when making filters the screen is encouraged too much until it gets passed

`var genealogytable = $('#genealogy').DataTable({
destroy: true,
serverSide: true,
ajax:"reloadTab/?idsponsor=" + idsponsor + "&&period=" + period + "&&type=" + typee,

    columns: [ 
        {
            data: null,
            className: "center",
            defaultContent: '<a href="javascript:void(0)" onclick="addRowGen(this.parentNode.parentNode.id)">' + 
                '<img src="{{ asset('img/add2.png')}}" width="30px"/>' + 
            '</a>'
        },

        {
            'targets': 0,
            'searchable':false,
            'orderable':false,
            'className': 'dt-body-center',
            'render': function (data, type, row){
                return '<td> <p><label> <input type="checkbox" id="emailGenealog[]" name="email[]" class="check_mailGenealogy" onclick="mailRowGen(this.parentNode.parentNode.parentNode.parentNode.id)" name="" value="'+row.email+'" /><span></span></label></p> </td>';
            }
            //defaultContent: '<td> <p><label> <input type="checkbox" id="emailGenealog[]" name="email[]" class="check_mailGenealogy" onclick="mailRowGen(this.parentNode.parentNode.parentNode.parentNode.id)" name="" value="" /><span></span></label></p> </td>'
        },
        {data: 'Line'},
        {data: 'Level'},
        {data: 'associateid'},
        {data: 'associatename'},
        {data: 'Distributor_status' }
        {data: 'email'},
        {data: 'mobile_number'},
        {data: 'alternative_number'},
        {data: 'country'},
        {data: 'PinRank'},
        {data: 'PayRank'},
        {data: 'InactiveMonths'},
        {data: 'RenewalDate', type:"text"},
        {data: 'SignupDate', type:"date"},

    ],
    rowId: function(a) {
        return a.email +' '+ a.associateid;
    },
      "columnDefs": [
        { 
          "targets": 2,  
          className: "text-right line_number", 
        },
        { 
          className: "level text-right", 
          "targets": 3 
        },
        { 
          className: "associateid text-right", 
          "targets": 4 
        },
        { 
          className: "associatename text-left", 
          "targets": 5,
          "width": 80,
        },
        { 
          className: "distributor_status text-left", 
          "targets": 6 
        },
        { 
          className: "email text-left", 
          "targets": 7 
        },
        { 
          className: "mobile_number text-right", 
          "targets": 8,
          "width": "10%" 
        },
        { 
          className: "alternative_number text-right", 
          "targets": 9 
        },
        { 
          className: "country text-left", 
          "targets": 10 
        },
        { 
          className: "PinRank text-left", 
          "targets": 11 
        },
        { 
          className: "PayRank text-left", 
          "targets": 12 
        },
        { 
          className: "InactiveMonths text-right", 
          "targets": 13 
        },
        { 
          className: "RenewalDate text-right", 
          "targets": 14 
        },
        { 
          className: "SignupDate text-right", 
          "targets": 15 
        },
        { 
          className: "periodo1 text-right", 
          "targets": 16 
        },
        { 
          className: "periodo1 text-right", 
          "targets": 17 
        },
        { 
          className: "periodo1 text-right", 
          "targets": 18 
        },
        { 
          className: "periodo1 text-right", 
          "targets": 19 
        },
        { 
          className: "periodo1 text-right", 
          "targets": 20 
        },
        { 
          className: "periodo2 text-right", 
          "targets": 21 
        },
        { 
          className: "periodo2 text-right", 
          "targets": 22 
        },
        { 
          className: "periodo2 text-right", 
          "targets": 23 
        },
        { 
          className: "periodo2 text-right", 
          "targets": 24 
        },
        { 
          className: "periodo2 text-right", 
          "targets": 25 
        },
        { 
          className: "periodo3 text-right", 
          "targets": 26 
        },
        { 
          className: "periodo3 text-right", 
          "targets": 27 
        },
        { 
          className: "periodo3 text-right", 
          "targets": 28 
        },
        { 
          className: "text-right periodo3", 
          "targets": 29,
          "width": "25%"
        },
        { 
          className: "text-right periodo3", 
          "targets": 30,
          "width": "25%"
        },
      ],
    select: true,
    dom: 'Bfrtip',
    lengthMenu: [
        [ 10, 25, 50, 100 ],
        [ '10 rows', '25 rows', '50 rows', '100 rows' ]
    ],
    buttons: [
        'pageLength',
        {
          extend:    'excelHtml5',
          text:      'Excel',
          titleAttr: 'Excel',
          className: 'btn  waves-light'
        },
    ]
});`

Adding footerCallback output in DOM between Show entries and Search option

$
0
0

Tried different options and tried to append the footerCallback output in DOM between Show All entries and Search option without any success. By any means is it possible. I want to remove footerCallback to be shown from footer and displayed at the top. This was necessary since I have All option enabled in Show All entries and when the entries are running in 1000's then viewing the footer become tedious.

Here is the testcase tried : http://live.datatables.net/mexefuxo/1/edit

How to set table width limit & ellipsis with resize?

$
0
0

I am using

in my datatables implementation.

I built a showcase on https://jsfiddle.net/njprhuya/6/. As you can see I am using the ellipsis renderer with a cutoff of 5 for demonstration purposes.

Now, it is nice that we can see all data, but if we were to use the column resize functionality provided by the github code, it is of small use since the text shown stays the same even though there is more space available.

What I am pursuing is to adjust the cutoff depending on the size of the column. To achieve this I thought I could calculate the maximum table width, let the columns expand up to that maximum and after reaching the limit I could start applying the ellipsis cutoff on the columns pushing the table to its limit by equally truncating the words up to the point where they fit in the table container.

But since the table width is not limited by the container it seems as though it can expand arbitrarily (as you will see if you comment the ellipsis line in the datatable definition of the jsfiddle).

First of all, I would like to limit the table size to the size of the container. And additionally I would like to know how I best approach this or if it even is possible. Sadly, I have not yet found anyone else trying something similar with datatables.net.

Disable only one option on field type radio

$
0
0

Hi!
I need disabled only one option in a field type: "radio". In the image, the option 'Warranty' must be disabled. How to make this?
Thanks

Editor autocomplete return values

$
0
0

Good afternoon (o;

As my project already uses autocomplete from jqueryui I give it a go as well with the editor..
But I am stuck what to exactly return from the ajax call.

Got this framework I've found here:

            label: "Artikelnummer",
            name: "Artikelnummer",
            type : "autoComplete",
            minLength: 2,
            opts: {
            source: function (query, result) {
                        $.ajax( {
                            url: '/inc/get.products.php',
                            dataType: 'json',
                            success: function ( data ) {
                                result ( $.map( data,    function (item) {
                                    console.log(data.data);
                                    return {
                                        label: data.data.number, << no clue yet (o;
                                        value: data.data.number << no clue yet (o;
                                    };
                                }
                            )
                            )
                        }
                    });
            }
            }

The PHP code just returns an array with all products availabe, and the editor autocomplete should fill then two fields automatically when selected...

So my simple question..what exactly do I have to return in the ajax call to autocomplete so it displays the product list matching they typed input?

I'm not that JS guru (o;

thanks in advace
richard

Hide the Icon appended by "drawCallback": in my data table

$
0
0


Hi,
I have ordered my data in table on the basis of a hidden column but, it appends a 'PLUS" icon with the value. i want to remove this icon please help!!


Multiple file uploads when multiple files are selected

$
0
0

Good day

Is this something that it is not possible or maybe will come in the future?

With multiple file upload I can attache several files...but not at once
when I for example select two or more files in the file chooser of the browser...

thanks in advance
richard

Load child row from AJAX source

$
0
0

Good day

Search here through but didn't found anything related to AJAX with cold rows...

Can I supply an AJAX source for the show event for a child row?

thanks in advance
richard

Edito: modify field calculated

$
0
0

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?

Ajax : load html from php file

$
0
0

Hello, i have a xhr-term.php file generate html <tr> like this :

echo '<tr>
<td>' . $value['ip'] . '</td>
<td>' . $value['nom'] . '</td>
<td>' . $value['site'] . '</td>';

if ($value['status'] == 'up')
{
   echo '<td><span style="font-size: 1em; color: green;"><i class="far fa-arrow-alt-circle-up"></i></span></td>';
}

if ($value['muted'] == '1')
{
   echo '<td><span style="font-size: 1em; color: red;"><i class="fas fa-microphone-alt-slash"></i></span></td>';
}
else{
   echo '<td><span style="font-size: 1em; color: green;"><i class="fas fa-microphone-alt"></i></span></td>';
}

if ($value['battery'] == 'BATTERY_GOOD')
{
   echo '<td><span style="font-size: 1em; color: green;"><i class="fas fa-battery-full"></i></span></td>';
}
else{
   echo '<td><span style="font-size: 1em; color: red;"><i class="fas fa-battery-quarter"></i></span></td>';
}

echo '
<td>' . $value['state'] . '</td>
<td>' . secondsToTime($value['uptime']) . '</td>
</tr>';

i would like to use this as data source. I tried this :

  function xhrterm(callback) {
    $.ajax({
      url: 'ajax/xhr-term.php',
      success: function(callback) {
      $('#table-visio').DataTable({});
      $('#table-visio tbody').append(callback);
      }
    })
  };
  xhrterm();

It works but only for the first ajax call (idea is to do a SetInterval to update data every xx seconds) after i have a message telling me i cant reinit datatable.
I tried aswell to put $('#table-visio').DataTable({}); outside function but it doesnt work.

Iv read documentation about Ajax Datatable but i didnt find something usefull for me (or i don't understand how to make it works)

Can you please tell me the right way to update my datatable with my xhr-term.php ?
Thanks in advance.

The 'Tab' Key can't work after one column updated - An Editor Problem

$
0
0

Hey, guys. I'm a datatables fans, and trying to use editor in my application.

I download the last version by DataTables download builder. https://datatables.net/download

Try to use the editor's inline mode, like this: Tab between columns, https://editor.datatables.net/examples/inline-editing/tabControl.html

My problem : the tab key can't work after the server side response, you can't use the Tab key to edit through the whole line.

here is my test case: http://114.215.164.199:8080/editor/resource/query.do

Any advice would be appreciated! thank you.

Viewing all 81702 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>