When using a fixed table layout without scrollX moving columns while a column is not visible will cause the table to grow too large if the hidden column is later made visible again. I've created a JS Bin showing the behavior. This happens because the fnColReorder function makes a call to _fnColumnOptions to recreate the get/set functions which has the unintended (I believe) side effect of setting the sWidthOrig property for all the columns (since the columns have a width in the DOM). The fix I have used is to copy the get/set code from the _fnColumnOptions function into the fnColReorder function. See below:

$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo, drop, invalidateRows )
{

...

  // regenerate the get / set functions
  //for ( i=0, iLen=iCols ; i<iLen ; i++ ) {
      //oSettings.oApi._fnColumnOptions( oSettings, i, {} );
  //}
  $.each(oSettings.aoColumns, function (index, oCol) {
      var mDataSrc = oCol.mData;
       var mData = oSettings.oApi._fnGetObjectDataFn(mDataSrc);
       var mRender = oCol.mRender ? oSettings.oApi._fnGetObjectDataFn(oCol.mRender) : null;
  
       var attrTest = function (src) {
           return typeof src === 'string' && src.indexOf('@') !== -1;
       };
       oCol._bAttrSrc = $.isPlainObject(mDataSrc) && (
           attrTest(mDataSrc.sort) || attrTest(mDataSrc.type) || attrTest(mDataSrc.filter)
       );
       oCol._setter = null;
 
       oCol.fnGetData = function (rowData, type, meta) {
       var innerData = mData(rowData, type, undefined, meta);

        return mRender && type ?
            mRender(innerData, type, rowData, meta) :
            innerData;
        };
        oCol.fnSetData = function (rowData, val, meta) {
            return oSettings.oApi._fnSetObjectDataFn(mDataSrc)(rowData, val, meta);
        };
  });

...

}

Hello!!

I'm create a Datatable with RowDetails

Radomly I recive this error:

Uncaught TypeError: Cannot read property '_detailsShow' of undefined
at u.<anonymous> (datatables.min.js:132)
at Function.isShown (datatables.min.js:114)
at HTMLTableCellElement.<anonymous> (monitoralertas.aspx:335)
at HTMLTableElement.dispatch (jquery-1.10.2.min.js:5)
at HTMLTableElement.v.handle (jquery-1.10.2.min.js:5)

This error appears when I click the button (+) on my Grid

Steps:
1) I have a filter section, when I push the button Search this button call to the function Buscar(). I use the filter section to launch the ajax Rq with parameters

..
function Buscar() {
document.getElementById("Datos").style.display = ""; //Poner el stulo del DIV
$('#KPIAlertas').DataTable().clear()
$('#KPIAlertas').DataTable().destroy()
$.fn.dataTable.moment('DD/MM/YYYY H:mm:ss');
var table = $('#KPIAlertas').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'print'
],
"ajax":
{
"url": "./ajax/alertas.ashx",
"type": 'POST',
"data": { "op": "GetAlertas", "a_codi": ObtenerFiltroCliente()}
},
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "Cliente" },
{ "data": "Alerta" },
{ "data": "Fecha" },
{ "data": "ValorTotal", "width": "10", "className": "dt-body-center" },
{ "data": "ValorRegistrado", "width": "10", "className": "dt-body-center" },
{ "data": "Valor", "width": "10", "className": "dt-body-center" },
{ "data": "ActualKPI", "width": "10", "className": "dt-body-center" },
{
"data": function (data, type, row, meta) { if (data.FechaRevisada == "") return false; else return true; }, "width": "10", "className": "dt-body-center",
"render": function (data, type, row, meta) {
if (row.FechaRevisada == "") {
return "<img id=IRes_" + row.id_ale + " src='./img/PRevisada.png' onclick='VerificarAlerta(" + row.id_ale + ",1)' />";
}
else {
return "<img id=IRes_" + row.id_ale + " Title='" + row.FechaRevisada + "'src='./img/Revisada.png' onclick='VerificarAlerta(" + row.id_ale + ",0)'/>"
}
}
}
],
"order": [[1, 'asc']],
"pageLength": 25,
"language": {
"url": "./lang/datatable.json",
buttons: {
copy: 'Copiar',
copyTitle: 'Copiado al portapapeles',
copySuccess: {
_: '%d lineas copiadas',
1: '1 línea copiada'
},
print: 'Imprimir'
}
}
});
// Add event listener for opening and closing details
$('#KPIAlertas').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
//var childrenHtml = ObtenerHTML(row.data());
ObtenerHTML(row.child, row.data())
// row.child(childrenHtml).show();
tr.addClass('shown');
}
});

    }   

...

Can you help me?

In my example, I am using ColVis and ColReorder so the user can reorder the columns at any time and the buttons are also re-ordered. My use case is that a user should be able to search on an individual column so I started working on this based on this example

Works fine without the ColVis buttons. Once a user clicks on a button, the column is shown, but doesn't have a filter on it. My thought was, to simply figure out what the column index was and re-initiate the filter code similar this:

table.on('buttons-action', function (e, buttonApi, dataTable, node, config) {

    let i = 0; // buttonApi tells me which button was pressed, but how do I determine the corresponding column index?

     // Put the input in the header
    let title = $(table, 'thead th').eq(i).text();
    $(node).html('<input type="text" placeholder="' + title + '" data-index="' + i + '" />'); 

    // Wireup the event handler 
    $(table.table().container()).on('keyup', node, function () {
        table
            .column($(this).data('index'))
            .search(this.value)
            .draw();
    }); 
});

If there is a better way to approach this, please let me know.

By default the DataTables on my page save their state, "stateSave": true. But sometimes, depending on the Referrer to my page, I need to clear out their state and present the blank version. If the Referrer (document.referrer) was a specific URL then I keep my state, otherwise I erase it.

Suppose I initially initialize my DataTables in Document-Ready as below (by default with stateSave = TRUE), and then after performing my check, if appropriate, I need to clear out all filters/sorts and present a blank table. Otherwise the table is presented with the Saved State from before.

  $('document').ready(function () {
   // 1. Set up DataTables
      $('#activeRequestsTable').DataTable({
          "responsive": true,                                               
          "stateSave": true,    // By default always save state. It will only be cleared in specific cases.
         "ajax": {    ... }
      });
     // etc.

     // 2. If Some URL Referrer Condition satisfied, need to clear out and re-paint my DataTables
    if (referrerCondition()) {
        var table = $('#activeRequestsTable').DataTable();
         // Clear state
         table.state.clear();
         // Redraw (or do something to lose the filters/sorts -- tried both, not working)
         table.draw();
         table.ajax.reload();
         //...? what else?

}

The problem is the above code doesn't work. When I have referrerCondition, do state.clear(), and then redraw (both ways), I still see the saved filters/sorts. It didn't erase my state, or maybe it didn't redraw.

So why is this state-clearing not working?

My issue here is that the variable of the second and third table don't keep the value of datable but the first one do it well. Anybody knows if datatable is able to handle more than one table at the same time. I post my code below:

        $(document).ready(function() {
            var table = $('#listasocios').DataTable();

            $('#listasocios tbody').on('click', 'tr', function () {
                if ( $(this).hasClass('selected') ) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
                //alert(table + ", " + JSON.stringify(table));
                var renglon = table.row( this ).data();
                var detalle = $("#detalle-table").DataTable({
                    "ajax": {
                        url: "ajax/cargar_reportedetalle",
                        type: "POST",
                        data: {
                            "idsocio": renglon[0]
                        },
                        dataSrc: ""
                    },
                    columns: [
                        { data: "contador" },
                        { data: "noeconomico" },
                        { data: "marca" },
                        { data: "modelo" },
                        { data: "placas" },
                        { data: "tipounidad" },
                        { data: "socio" },
                        { data: "km" },
                        { data: "estatus" },
                        { data: "serie"}
                    ],
                    columnDefs: [
                        { className: "cssbold text-center", targets: [0] },
                        { className: "text-center", targets: "_all" }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'colvis',
                        'excel',
                        'print'
                    ],
                    "autoWidth": false
                });
                //alert(detalle + ", " + JSON.stringify(detalle));
                var resumen = $("#resumen-table").DataTable({
                    "ajax":{
                        url: "ajax/cargar_reporteresumen",
                        type: "POST",
                        data: {
                            "idsocio": renglon[0]
                        },
                        dataSrc: ""
                    },
                    columns: [                            
                        { data: "unidad" },
                        {
                            "className":      'details-control',
                            "orderable":      false,
                            "data":           null,
                            "defaultContent": ''
                        },
                        { data: "marca" },
                        { data: "detenidos" },
                        { data: "activos" },
                        { data: "porparar" },
                        { data: "accidentados" },
                        { data: "cantidad"}
                    ],
                    columnDefs: [
                        { className: "text-center", targets: "_all" }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'colvis',
                        'excel',
                        'print'
                    ],
                    paging: false,
                    info: false,
                    order: [[1, 'asc']]
                });
                //alert(detalle + ", " + JSON.stringify(detalle));
                $("#reportes").modal("show");
            });

            $('#detalle-table tbody').on('click', 'tr', function () {
                alert("You have clicked here!!");
            });

            $('#resumen-table tbody').on('click', 'td.details-control', function () {
                alert("You have clicked here!!");                    
            });
        });

As you can see when I click one row of the second of third table it never trigger the alert inside.
Even when I try to get the variable value with an alert it's shown as undefined, or just crash: alert(detalle); or alert(detalle + ", " + JSON.stringify(detalle));

I'm a novice with datatables and I was trying to create a filter for every column in datatable. I found an example on this webpage however it's not working. I hope anyone could help me. Post my Jquery code and HTML table.

                detalle = $("#detalle-table").DataTable({
                    "ajax": {
                        url: "ajax/cargar_reportedetalle",
                        type: "POST",
                        data: {
                            "idsocio": idsocio
                        },
                        dataSrc: ""
                    },
                    columns: [
                        { data: "contador" },
                        { data: "noeconomico" },
                        { data: "marca" },
                        { data: "modelo" },
                        { data: "placas" },
                        { data: "tipounidad" },
                        { data: "socio" },
                        { data: "km" },
                        { data: "estatus" },
                        { data: "serie"}
                    ],
                    columnDefs: [
                        { className: "cssbold text-center", targets: [0] },
                        { className: "text-center", targets: "_all" }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'colvis',
                        'excel',
                        'print'
                    ],
                    autoWidth: false,
                    searching: false,
                    info: false
                });

                var contador = 0;
                $('#detalle-table tfoot th').each( function () {
                    var title = $(this).text();
                    if(contador > 0){
                        $(this).html('<input type="text" class="form-control form-control-sm" style="width: 100%;" placeholder="Buscar '+title+'" />');
                    }
                    contador++;
                } );

                detalle.columns().every( function () {
                    var that = this;
                    $( 'input', this.footer() ).on( 'keyup change', function () {
                        if ( that.search() !== this.value ) {
                            that
                            .search( this.value )
                            .draw();
                        }
                    } );
                } );

                        <table id="detalle-table" class="table table-striped table-sm table-hover" style="width: 100%; font-size: 13px;">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="text-center">No.</th>
                                    <th class="text-center">Económico</th>
                                    <th class="text-center">Marca</th>
                                    <th class="text-center">Modelo</th>
                                    <th class="text-center">Placas</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">Socio</th>
                                    <th class="text-center">Km</th>
                                    <th class="text-center">Estatus</th>
                                    <th class="text-center">Serie</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th class="text-center">No.</th>
                                    <th class="text-center">Económico</th>
                                    <th class="text-center">Marca</th>
                                    <th class="text-center">Modelo</th>
                                    <th class="text-center">Placas</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">Socio</th>
                                    <th class="text-center">Km</th>
                                    <th class="text-center">Estatus</th>
                                    <th class="text-center">Serie</th>
                                </tr>
                            </tfoot>
                        </table>

Hello,

We are using inline editing to enter data into a row, and we wish to modify the default behavior to only make the ajax post when a button in the last column is pressed? Currently when an ajax post is invoked upon tabbing through each cell which is not what we want. We would like to invoke the presubmit() and submit() events only when the button in the last column is clicked or the enter key is pressed? See attached screenshot for visual of the datatable. Thank you in advance

Is there a current example of how to populate the select options from a returned query dataset?

fields: [ 
             {
                 label: "Home State:",
                 name: "HOMESTATE",
                 type: "select",
                 options: ["NC", "SC", "VA"]
              }

Hi,

We are facing delay up to minutes while loading a datatable. When we analyzed performance using F12 debugger-> Performance option, it was showing that the dom loading was taking 80% of the cpu time.
We are using the fixed column option along with serverside option as our data can be up to 20000 rows. We are displaying 90 columns. We are using datatables-1.10.19, fixedcolumns-3.2.6. Please help.

Thanks,
Arun

Hi Everyone

I've just used the bar bones of the editor to update tables I need to edit and its working great (using in-line editing). However, I'm not sure how to move forward on this. I have a screen that list of samples taken during a specific inspection. showing 1) Where it was taken 2) the item it was taken from (window, wall, etc) 3) it's Sample number.... in addition I'm displaying 2 additional "Results" selections - the "Result" and "Recommended Action". I can update both these fields no problem and the data base it updating correctly. My problem is,,,, When I select the "Result" - I need 2 things to happen.

1) Set another field called "SampleType" - this is a value based from 0 to 3 depending on which "Result" is selected - so basically I need to use a select/case check the "result"
2) once Sample Type is done I need to do some maths and update a field called "totalRisk" using the value in SampleType and three other fields.

The above is easy in MS Access. I'm sure it's sometihing I need to do on an **event ** such as **change ** on the "Result" select- but I'm not sure how to move forward on this.

If anyone has an idea I would greatly appreciate it.

Thank you in advance for any guidance

I have a jquery datatable and it works great with server side processing. However, i am unable to stop ajax calls which are being fired from controls (input and anchor) inside the datatable. I don't know why datatable fires ajax call even from a control inside it.

Here is the columns section:

$("#table-pp").DataTable({
"processing": true,
"order": [[2, "asc"]],
"pagination": true,
"language": {
"infoFiltered": "",
"processing": "Loading. Please wait..."
},
"serverSide": true,
"destroy": true,
"ajax": {
"type": "POST",
"url": "/Site/test/GetData",
"data": { param: XYZ},
"error": function (e) {
},
"dataSrc": function (json) {
json.draw = json.draw;
json.recordsTotal = json.recordsTotal;
json.recordsFiltered = json.recordsFiltered;
return json.data;
}
},"columns": [
{
"title": "Priority", "data": "priority", "width": "200px",
"render": function (data) {
return '<span style="display:none">' + data + '</span><input type="number" class="display-order" onblur="updatePriority(this);" value="' + parseInt(data) + '">';
}
},
{
"data": "id", "orderable": false,
"render": function (id) {
return '<a class="cursor-pointer" onclick="updateStatus(' + id + ', false);">Deactivate</a>';

        }
    }
]

The problem is that on clicking Deactivate anchor tag and on increasing the counter in input control, both actions fire an ajax call to again get the data from server. I don't want to do it, as i have to update priority and then click a save button to save the data.

Issue is not with binding click event, updatestatus and updatePriority are being called correctly and it gets called before sending ajax request. Thus things are fine here. The problem is the ajax request that is fired as well and it rebinds the data again from ajax call, i don't want that.

How can I use filter() to get the top 100 values of a column and include the value of another column in the result?
Say I want to get top 10 amounts, from largest to lowest. And for each largest amount, I want the value from another column as well.

I have 2 datatables and each search box has the same name. first search box says "Search:" on 1 page, and I want to Name the Other Search Box Something Else Like "Enter Zip Code:" Reason is because each datatable has different information. How can this be accomplished? Thanks

Dear Sirs

Refer to this link: https://datatables.net/examples/advanced_init/footer_callback.html

How can we have pageTotal for multiple columns, for example if there are numerical data at (4th, 5th, 6th columns) all need a pageTotal. how will the below script be amended ?

"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 4, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        jQuery( api.column( 4 ).footer() ).html(
           // '$'+pageTotal +' ( $'+ total +' total)'
           pageTotal.toFixed( 2 )
        );
    },

First of all, I would like to say that I know this is a question that comes up quite often and has been discussed many times.
But despite that, I can not solve it ...

I think I have declared my sources with jquery first and then datatable but when I load the web page I always have the same error message:

Uncaught SyntaxError: Unexpected token { jQuery.Deferred exception: $ (...). DataTable is not a function TypeError: $ (...). DataTable is not a function at HTMLDocument. (https: // localhost: 44338 / Events: 87: 27) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined

Here's a picture of the network:

Could you please help me to solve it?

Thx!

how to I do inline editing in our Datatable?

I have the following php working ok:

    Editor::inst( $this->editorDb, 'importApplication', 'importNo' )
    ->fields(
      Field::inst( 'importApplication.appNo' ),
      Field::inst( 'importApplication.seqNo' ),
      Field::inst( 'importApplication.title' ),
     // cut short
      Field::inst( 'importApplication.lastModifiedBy' ),
      Field::inst( 'supportDocReview.lastModified' )
          ->options( Options::inst()
            ->table( 'supportDocReview' )
            ->value( 'appNo' )
            ->label( 'lastModified' )
          )
      )
      ->leftJoin ( 'supportDocReview', 'importApplication.appNo', '=', 'supportDocReview.appNo')
      ->process( $_POST )
      ->json();    

then wanna add a where clause to filter data from a column (code):

$codeList = ( 406, 407 );      // list of codes to display
Editor::inst( $this->editorDb, 'importApplication', 'importNo' )
    ->fields(
      Field::inst( 'importApplication.appNo' ),
      Field::inst( 'importApplication.seqNo' ),
      Field::inst( 'importApplication.title' ),
     // cut short
      Field::inst( 'importApplication.lastModifiedBy' ),
      Field::inst( 'supportDocReview.lastModified' )
          ->options( Options::inst()
            ->table( 'supportDocReview' )
            ->value( 'appNo' )
            ->label( 'lastModified' )
          )
      )
      ->leftJoin ( 'supportDocReview', 'importApplication.appNo', '=', 'supportDocReview.appNo')
      ->where( function ( $q ) {
        $q->where( 'code', $codeList, 'IN', false );       // where clause to get all those codes
      } )
      ->process( $_POST )
      ->json();    

end up with this error,
DataTables warning: table id=appSummary - Invalid JSON response.

please help.

Please allow calling the ajax callback function with an HTML string.

This way I could more easily use datatables with a JS templating engine such as the one included with lodash/underscore.

Please consider this same enhancement for the "data" option which can be used to initially construct the datatable widget.

When datatables is combined with a JS templating engine it makes for a very pleasant experience because I can focus on writing the HTML and use HTML5 data attributes, with minimal boilerplate JS code on each page.

Example:

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback('<tbody><tr><td>A</b><td>B</td></tr><tr><td>C</td><td>D</td></tr></tbody>');
    );
  }
} );

Dear community,

I am working on a page to display cargo and the movement in a storage. Basically I used the MJoin example and modified it a
bit. But my problem should be the same with the example provide here: https://editor.datatables.net/manual/php/mjoin#Mjoin-class

To show my problem is use this as an example and modified the value of the third row in "user_permission" and added
the field "created_on". Only the data in the user table will be modified the rest will only be displayed (the database is populate
by my android application).

Table: users                 Table: user_permission
+----+------------+-------+  +----------+-----------+-----------+
| id | first_name | role  |  | staff_id | access_id |created_on
+----+------------+-------+  +----------+-----------+-----------+
| 1  | Allan      | CEO   |  | 1        | 2         |2018-02-01 10:00:00         |
| 2  | Charlie    | CTO   |  | 2        | 1         |2018-02-01 10:00:00         |
| 3  | Fiona      | COO   |  | 2        | 1         |2018-02-01 11:00:00         |
| 4  | Richard    | CFO   |  | 3        | 1         |2018-02-01 10:00:00         |
+----+------------+-------+  | 4        | 1         |2018-02-01 10:00:00         |
                             +----------+-----------+-----------+
 
Table: permission
+----+----------+
| id | name     |
+----+----------+
| 1  | Printers |
| 2  | Web-site |
| 3  | VM       |
+----+----------+

I took a look at the SQL-Query and it seems to use a syntax with DISTINCT (Select Distinct value, value2....). So i need
to get the value for "created_on" or else the two records for staff_id = 2 and acces_id = 1 will be combined. I tried something
like this below to acces the field "created_on" from the table "user_permission".

Editor::inst( $db, 'users' )
    ->field(
        Field::inst( 'users.first_name' )
    )
    ->join(
        Mjoin::inst( 'permission' )
            ->link( 'users.id', 'user_permission.user_id' )
            ->link( 'permission.id', 'user_permission.access_id' )
            ->order( 'name asc' )
            ->fields(
                Field::inst( 'id' )
                    ->options( Options::inst()
                        ->table( 'permission' )
                        ->value( 'id' )
                        ->label( 'name' ),
                Field::inst( 'created_on' )
                    ->options( Options::inst()
                        ->table( 'user_permission' )
            )
    )
    ->process($_POST)
    ->json();

I though the

->table( 'user_permission' )

is something like "the values is contained in the database user_permission". But the error I get is something
like "Unkown colmun 'permission.created_on'". Maybe the problem is cause by my old datatables Version (the one i bought
is from 12th Jun 2017)?

Could somebody give me a hint how to do this? Would really appreciative some help.

Hi All,

I wanted to insert a "Heading column" when the editor window is opened. This changes based on the context, if a new record is created no heading is displayed where as if a existing record is edited it displays some text. I have used the below code

editor.on('open', function(e,json,data){
    console.log('open');
    console.log(json);
    console.log(data);
    console.trace();

    if (data == 'edit')
    {
        var html = "<center><div id=\"headingtext\" class=\"alert alert-success\">Approve for payment</div></center>";
         $('div.DTE_Form_Content').prepend( html );
    }
});

This method is invoked twice so the prepended html appear twice. Please see the picture below. If i see the stack trace it is invoked from the same handler twice.

I have a similar code in similar html page but there it is only invoked once. I'm using the following header files

<!-- Required datatable js -->
        <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>


        <script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

        <!-- Buttons -->
        <script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/jszip.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/pdfmake.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
         <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
        <!-- Key Tables -->
        <script src="https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js"></script>

        <!-- Responsive -->
        <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>

        <!-- Selection table -->
        <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>

        <!--datatables-editor ext -->
        <script src="../../php/Editor181/lib//js/dataTables.editor.min.js"></script>
        <script src="../../php/Editor181/lib//js/editor.bootstrap4.min.js"></script>