I am trying to use the editor in conjunction with webpack, bootstrap 4 and vue.

Seems to work nicely for the most part but the editor package on npm seems to be having some issues or maybe it is just me.

I have installed the following front end dependencies:

"datatables.net-bs4": "^1.10.19",
"datatables.net-editor-bs4": "^1.6.3",
"datatables.net-select-bs4": "^1.2.7",

In my script, I have the following:

// Import jquery
import $ from 'jquery';
// Make it available globally as it needs to be accessible within the single file components (.vue)
window.$ = $;

// Import datatables and the required plugins, using the bootstrap 4 styling 
import 'datatables.net-bs4';
import 'datatables.net-select-bs4';

In my vue component:

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
          <thead>
            <tr>
              <th>Name</th>
              <th>Position</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
            </tr>
            <tr>
              <td>Garrett Winters</td>
              <td>Accountant</td>
            </tr>
          </tbody>
        </table>
      </div><!-- col-12 -->
    </div><!-- row -->
  </div><!-- container -->
</template>

<script>
  export default {
    mounted() {
      $('#example').DataTable({
        select: true,
      });
    }
  }
</script>

<style lang="scss">
  @import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
  @import '~datatables.net-select-bs4/css/select.bootstrap4.css';
</style>

This works, however, if I try to include the javascript for the editor:

// Import datatables and the required plugins, using the bootstrap 4 styling 
import 'datatables.net-bs4';
import 'datatables.net-editor-bs4'
import 'datatables.net-select-bs4';

I get the following error when compiling:

ERROR in ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js
Module not found: Error: Can't resolve 'datatables.net-bs' in '/removed/app/path/node_modules/datatables.net-editor-bs4/js'
 @ ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js 8:2-12:4
 @ ./assets/js/projects.js

ERROR in ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js
Module not found: Error: Can't resolve 'datatables.net-editor' in '/removed/app/path/node_modules/datatables.net-editor-bs4/js'
 @ ./~/datatables.net-editor-bs4/js/editor.bootstrap4.js 8:2-12:4
 @ ./assets/js/projects.js

Seems that datatables.net-editor-bs4 requires datatables.net-editor and datatables.net-bs?

Going back to the previous times that I have worked with the editor, I have:

<script src="/assets/plugins/datatables/Editor-1.7.3/js/dataTables.editor.min.js" type="text/javascript"></script>
<script src="/assets/plugins/datatables/Editor-1.7.3/js/editor.bootstrap.min.js" type="text/javascript"></script>

Which made me think okay, maybe I need to install the dependency datatables.net-editor which I did and it left me with one error relating to datatables.net-bs which doesnt really make sense to me because it's for the bootstrap3 framework. Installing it does not solve the issue, just makes some more issues so I am not sure that this is the right path to take.

I am wondering if I have missed a step here?
Has anyone else gotten the editor working with webpack and the npm install?

I found the following question and relative answer on Stack Overflow: https://stackoverflow.com/a/32993719/2110294

Which points to a previous discussion on these forums: https://datatables.net/forums/discussion/29860/using-colvis-button-with-responsive-table-disables-hidden-columns

In this we find the following example: http://live.datatables.net/poqoyezo/1/edit

In this example, when a column is hidden / shown by ColVis it is added or removed from the child row.

Bumping the dependencies to the latest versions shows that this functionality is no longer the same.

Reverting the Responsive dependency to 1.0.7 shows that it something that changed between this version and version 2 which created these changes.

Is it possible that we can recreate this behavior with version >=2.0.0 of Responsive, could anyone share an updated example of this?

Many thanks.

EDIT: Here is a test case: http://live.datatables.net/femudeda/1/edit

Hi

Is it possible to select a row at the same time as clicking on an inline cell?

At the moment if I click on a non-enterable cell, then the row gets selected.

Clicking on an enterable cell goes into edit mode, but does not select the row. However, if I click that cell a second time it does select the row but then I get an error:

_Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11
_
I thought about putting a listener on focusin - tr, but it does not seem to make any difference:

The setup of the table is very simple (add the class enterable to the cells I want to edit) and I have setup the keys and select:

keys: {
  columns: ".editable",
  keys: [9],
  editor: receiptEditor,
  editOnFocus: true,
  blurable: true
},
select: {
  select: true,
  style: "single",
  selector: "td",
  blurable: false
},

I then created an event for enterable fields:

$("#receiptTable").on("click", "td.editable", function () {
receiptEditor.inline();
});

Thanks for your help.

Dov

I have initialized a datatable in a separate js file using the id attribute of the html table. Datatable loads and works. But when i try to insert an ajax result row to datatable using row.add, i get "tbl.row is undefined" error.
How can I correctly reference to a datatable that is initialized in a seperate script file?

that is sample html file:

<!-- Form -->
<form>
  <input type=number .../>
  <button id="btn">Add Product</button>
</form>
<!-- Table -->
<table id="tblOne"  ...>
  <thead><tr><th>...</th></tr></thead>
  <tbody><tr><td>... </td></tr></tbody>
</table>

here's the ajax code included in the html page:

<script type="text/javascript">
$("#btn").on('click', function(){
  var id = $('input').val();  
  $.ajax({
    method: "POST",
    url: "/Product/Add/"+id,
    data: { data }
    success: function (data) {
      tbl.row.add([data.Id, data.Price ...]); // here: I get "tbl.row undefined" error
                                          // I don't know how to correctly reference a datatable
                                          // that is already initialzied in app.js file. $tbl, $('#tbl')
                                          // does not work.
  });
})
</script>

that is the app.js file

$(function () {
  //Collect all tables in html page
  var tableArray = Array.prototype.slice.call($('table'));

  //for each html table produce table name and initialize datatable
  tableArray.forEach(function (el, index) {
  var tblName = $('table').attr('id') === "undefined" ? $('table').attr('id') : 'dt' + index;
  var $tbl = $(el).DataTable({ //options here ...});
  });
})

when i run following script in the browser's console i get "yes":

if ( ! $.fn.DataTable.isDataTable( tblOne ) ) { // tblOne is the id of html table
  console.log("no");
}else {console.log("yes")}

is there any Documentation for Require.js? I tried but not working.

Hi all!
I would like to sum up all values in a specific column and display the updated result after each filter automatically.
Is that possible? Any hints would be awesome.

best greetings and thank you in advance,
Pascal

I have primeng datatable, if the datatable contains a lot of rows, the performance very slow.
I have 1000+ rows and 10 columns.

When I create a new entry I want to also save two fields in another database table as a reference. In my specific case they are two ID's. day_id and item_id.

How can I get the ID field of the entry last created by the Editor instance/process? So I can then add it to my reference table?

Thanks

Hi,
I am getting the error msg as indicated by the title of this Question. My html file is as follows. My table '#word_freq_table' is defined in one of my js files.
Could anybody help please? Thank you in advance.
best regards
Jim

Here is my html file:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/datatables.js"></script>
<script type="text/javascript" src="js/datatables.css"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>
<link rel="stylesheet" type="text/css" href="js/styles.css">

<script type="text/javascript">

    $(document).ready(function() {
        $('#word_freq_table').DataTable();
    });

</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

Sorry if this is noob css question. I'm struggling to find the best html / css to put multiple elements on a single row in the Editor form for two situations:

1. want distance and units on same line with no label for the units, e.g., Distance [ textbox ] [km, M select]
2. want link on same line, e.g., Client [ textbox ] editlink

I'm using an Editor template so I have more control over the display. Also note I'm using jquery ui if that makes any difference.

http://live.datatables.net/vekapazu/2/ has some of the stuff I was trying. This example is without jquery ui, and with button instead of link.

I'm calling PHP server-side to use the databable editor. When clicking on New I can create my new record. I also want to create a reference to this new record in another MySQL table. I can do this by calling another method.

All good so far. I just cannot work out how to capture the id of the row just created.

Any advice appreciated. I'll post my code below. You can see I have two vars I need to get. The item_id is the row of the new ly created record, but I don't know how to access this yet. So for the example I have it set to 123...

                // Build our Editor instance and process the data coming from _POST
                Editor::inst( $db, 'mtp_event_schedule_items', 'item_id' )
                        ->fields(
                                Field::inst( 'mtp_event_schedule_items.item_id' )->set( false ),
                                Field::inst( 'mtp_event_schedule_items.item_datetime_start' )
                                        ->validator( Validate::dateFormat( 'Y-m-d H:i:s' ) )
                                        ->getFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
                                        ->setFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) ),
                                Field::inst( 'mtp_event_schedule_items.item_datetime_end' )
                                        ->validator( Validate::dateFormat( 'Y-m-d H:i:s' ) )
                                        ->getFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
                                        ->setFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) ),
                                Field::inst( 'mtp_event_schedule_items.item_speaker_id' ),
                                Field::inst( 'mtp_event_schedule_items.item_track_id' ),
                                Field::inst( 'mtp_event_schedule_items.item_track_title' ),
                                Field::inst( 'mtp_event_schedule_items.item_description' ),
                                Field::inst( 'mtp_event_schedule_items.item_track_merged' ),
                                Field::inst( 'mtp_event_schedule_items.item_component_type' ),
                                Field::inst( 'mtp_event_schedule_items.item_link' ),
                                Field::inst( 'mtp_event_schedule_items_meta.day_id' )
                        )
                        ->leftJoin( 'mtp_event_schedule_items_meta', 'mtp_event_schedule_items.item_id', '=', 'mtp_event_schedule_items_meta.item_id' )
                        ->where('mtp_event_schedule_items_meta.day_id', $day_id )
                        ->debug(true)
                        ->process( $_POST )
                        ->json();

                // load model
                $this->load_model('schedule_model');

                // get variables
                $day_id = $_POST('day_id');
                $item_id = 123;

                // Add a reference table for this new
                $this->my_model->add_items_meta_reference($day_id, $item_id);

Hi,

While using server-side processing my script returns the data in the table and can be searched no problem. There is a status field in my database which is numeric, however the status codes stored in that database link to the status names in another.

Is there anyway once the data is returned, I can then lookup the status names from another database from the returned ID's.

E.g column 2 is status. In the database the table returns the numeric value '2', however that 2 actually means 'Open'.

I hope this makes sense and it would be great if someone could provide some assistance with this issue.

I'm just using the default server side scripting file included on the server-side processing documentation page.

Also, would then you be able to search for the words 'Open' or will you have to use '2' as its querying straight back to the database?

Or would it be easier to build up my own searching script form the sent sever-side variables?

Many thanks,
Connor

I have tried to post 2 questions in the past week and they both said they need moderator access to approve. Is it expected that that access could take over a week? Thanks.

So my customers table includes their name, business name etc. However their address is stored in another table and loaded when the data is fetched.

With server-side processing am I able to search for the address, as when it queries it'll try to search for the address in the customers table where it only contains their first and last name, business name, etc.

Connor

We have a responsive datatable with a column that has a number of buttons. Responsive works fine except for the column - it doesn't wrap the buttons inside the column. Any idea how to fix it>

Using version 1.10.18.

Steps to repro: create a page with multiple jQuery DataTables that are hidden/shown via v-show to a vue.js data variable. The initially 'shown' datatable looks fine. But when you switch to the second table, via a button press that shows it, the column formats are all wrong. If you change back to the originally working table, it's column widths are broken as well.

.columns.adjust().draw() does not appear to fix this.

http://jsfiddle.net/cardinal177/m7bzjsag/3/

Any suggestions very appreciated!

hello,

i have a level access to the information for example for clients list i need to display the turnover of the client for some user and hide it for others.

also i need it to display delete date for the administrator only for the administrator which can recover the information from soft delete.

any idea ? to control this using json ??

FYI i already use a colvis to display and hide columns

B.R

Hi,

I have a problem with DataTables,
I would like to add an autocomplete with the search box, my first problem is I can't assign an ID to the search input outside of the ".datatable" (I can, but always in the 'initComplete').

My second is when I assign an ID, then I add flexdatalist and refresh the "function" of "flexdatalist", it's fonctional but when I click in the search input my cursor/focus is off, and I must re-click to can type letters but it's always focus off (the search works but not the autocomplete and my letters disapear), the both (DataTables and flexdatalist) don't work correctly together ahaha
Also everytime I click on, my page returns to the top,

Maybe a solution ?

PS : flexdatalist works when I specify the code : <input id="ac-0083" class="flexdatalist">
outside of the datatables

Thanks

` $.extend( $.fn.dataTable.defaults, {

    "dom": '<"top"AfB>rt<"bottom"ip><"clear">',

    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
        "decimal": ",",
        "thousands": ".",
        "language": {
            alphabetSearch: {
                alphabet: '#ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                infoDisplay: 'Afficher :',
                infoAll: 'Tous'
            }
        }
    },

    "paging": true,
    "pagingType": "full_numbers",

    "ordering": true,

    "searching": true,

    "info": false,

    "pageLength": 25,

    fixedHeader: {
        header: true,
        footer: true
    },

     buttons: [
        {
            text: 'Réinitialiser',
            action: function ( e, dt, node, config ) {
                dt.search( '' ).draw();
            }
        }
    ],

   initComplete: function () { //WORK

        var idTable = this.attr('id'),
            idDataList = $("#" + idTable ).attr('data-id-ac');
            initDataList = $("#" + idTable ).attr('data-init');

        if ( idDataList != 0 && initDataList != 1 )
        {
            $("#" + idTable + "_filter input").attr('id', idDataList ).addClass('flexdatalist');
            $("#" + idTable ).attr('data-init','1');
            initialiseDatalist();
        }

    } */


} );

$('.table-liste').DataTable( {
} );

/* $("#table-liste-0083_filter input").attr('id', 'ac-0083' ).addClass('flexdatalist');
initialiseDatalist(); */ //DOESN'T WORK

$('#table-liste-0083').DataTable( {

    "pageLength": 35,

    "order": [[0, 'asc']],

    rowGroup: {
        dataSrc: 1
    },

    "dom": '<"top"Bf>rt<"bottom"ip><"clear">',

    alphabetSearch: {
        column: 1
    },

    "columnDefs": [
        {
            "type": 'natural',
            "targets": [ 0 ],
            "visible": false, 
            "searchable": false,
            "orderable": false
        },
        {
            "targets": [ 1 ],
            "visible": false, 
            "searchable": true,
            "orderable": false
        },
        {
            "targets": [ 2, 3 ],
            "visible": true, 
            "searchable": true,
            "orderable": false
        },
        {
            "targets": [ 4, 5, 6, 7 ],
            "visible": true, 
            "searchable": false,
            "orderable": false
        }
    ]

} );

function initialiseDatalist(){

var idDataList = $('.flexdatalist').attr('id');
$('.flexdatalist').attr('list', idDataList + '-datalist')

$('.flexdatalist').flexdatalist({
    minLength: 2,
    searchByWord: true,
    searchContain: false,
    maxShownResults: 5,
    noResultsText: 'Aucun résultat pour "{keyword}"',
    normalizeString: function (string) {
        return latinize(string);
    }
});

}

initialiseDatalist();`

<table id="table-liste-0083" data-id-ac="ac-0083" class="display" width="100%">

I've already quoted "jquery.js" , but I still can't use plug-ins.
this is my code:
require('jquery/dist/jquery.js');
require('echarts/map/js/china.js');
require('datatables/media/css/jquery.dataTables.css');
require('datatables/media/js/jquery.dataTables.js');
require('jquery/dist/jquery.min.js');
require('datatables.net-plugins/sorting/ip-address.js');

Then I can use "$";

I've already quoted "jquery.js" , but I still can't use plug-ins.
this is my code:

Object../node_modules/datatables.net-plugins/sorting/ip-address.js
src/scout-web-react/node_modules/datatables.net-plugins/sorting/ip-address.js:19

require('jquery/dist/jquery.min.js');
require('datatables/media/css/jquery.dataTables.css');
require('datatables/media/js/jquery.dataTables.min.js');
require('datatables.net-plugins/sorting/ip-address.js');
~~~~
Then I can use "$";