Hi there -- I'm using DataTables in Webpack and following the instructions here: https://www.datatables.net/download/npm

The interesting thing about Webpack is that it provides BOTH AMD and CommonJS environments, so when the datatables.net module checks for what to export, it defaults to the AMD module. This breaks everything if in fact you used a CommonJS require() to import the module. What you get is a very mysterious 'cannot set $ of undefined' error.

It took me a while to figure this out but as far as I can tell there are two ways to fix this without modifying the datatables.net code:
(1) Disable AMD entirely in Webpack (see http://stackoverflow.com/questions/29302742/is-there-a-way-to-disable-amdplugin); or
(2) Do NOT immediately invoke datatables.net as instructed at https://www.datatables.net/download/npm. In other words, just require the file without invoking or passing arguments. I'm not exactly sure why this latter solution works.

I suppose an additional solution would be to just embrace the AMD dependency but I have not tried this.

I like DataTables a lot so posting this here to help anyone else out that may run across this issue.

swinc

Hi there,

I used the "class": "classname" attribute successfully on a <select> input successfully, but it does not work with radio buttons.
Did I do something wrong or does this possibility just not exist?

here is the part of my code:

table: '#wish_days_off',
fields: [
{
// Dropdown
label: "<?= Settings::getUsernameWording(); ?>:",
name: "days.user_id",
type: "select",
attr: {
"class": "browser-default custom-select"
},
placeholder: "bitte wählen..."
},
{
label: "Priorität:",
name: "days.priority",
type: "radio",
attr: {
"class": "form-check-input"
},
def: "1",
multiEditable: false,
options: [
{
label: "<?= Settings::getWishfreeWordingPriorityLow(); ?>",
value: <?= Wish_days_off::PRIORITY_LEVEL_LOW; ?>
},
{
label: "<?= Settings::getWishfreeWordingPriorityMiddle(); ?>",
value : <?= Wish_days_off::PRIORITY_LEVEL_MIDDLE; ?>
},
{
label: "<?= Settings::getWishfreeWordingPriorityHigh(); ?>",
value: "<?= Wish_days_off::PRIORITY_LEVEL_HIGH;?>"
}
],
},

Thanks in advance!
Best regards,
Bernhard

Hi,

I am trying to migrate my project to Symfony 4. To do so I want to use webpack/encore instead of static assets. I am unsing the datatables plugin and now I am trying to make it work. After requiring the module I cannot use $.fn.dataTables.

TypeError: $.fn.dataTable is undefined

The module is imported via require('datatables.net');
I also tried to use AMD: require('datatables.net')(window, $); this resulted in TypeError: this is undefined (jquery.dataTables.js:132).

Writing the require output to $.fn.dataTable also doesn't work.
dataTable = require('datatables.net'); $.fn.dataTable = dataTable;

Of course it's no longer undefined but it also doensn't work because the module exports DataTable and not $.fn.dataTable. So the resulting error when unsing it is TypeError: $(...).DataTable is not a function

I would appreciate your help to finally make this work like I would use static assets.

I've been stuck on this for a while trying to fix it. I am just trying to use datatables via NPM. I installed it along with some of the extensions but all the requires() for datatables fail with this error:

ERROR in ./index.js
Module not found: Error: Can't resolve 'datatables.net-dt' in path

I ran webpack with --display-error-details and it shows:

Field 'browser' doesn't contain a valid alias configuration
                    path/node_modules/datatables.net-colreorder-dt/index doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      path/node_modules/datatables.net-colreorder-dt/index.json doesn't exist

I don't understand why it is looking for the index. I have followed all the documentation I can find on webpack and datatables and according to the datatables download section I should only have to add the packages (which I have done) and add the require's part and it should work.

I have looked at the repos for datatables and its extensions and there is no index in any of them. I've googled this in every which way possible and can't find any answer so I'm hoping someone here might have an idea as I have tried many different things which either didn't work or produced even more errors. I'm really not sure if this is an error with webpack or with datatables.

This is my index.js

require('./index.html'); 
var AWS = require('aws-sdk');
require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder-dt' )();
require( 'datatables.net-fixedheader-dt' )();
require( 'datatables.net-rowgroup-dt' )();

No code after the requires runs so I haven't included it.

This is my package.json

{
  "name": "TestCode",
  "version": "1.0.0",
  "description": "Test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": " ",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.116.0",
    "datatables.net-buttons-dt": "^1.4.2",
    "datatables.net-colreorder-dt": "^1.4.1",
    "datatables.net-dt": "^1.10.16",
    "datatables.net-fixedheader-dt": "^3.1.3",
    "datatables.net-rowgroup-dt": "^1.0.2",
    "jquery": "^3.2.1",
    "raw-loader": "^0.5.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
}

and this is my webpack config

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  context: path.resolve(__dirname, 'src'),
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loaders: ['json']
      },
      {
        test: /\.html$/,
        loader: ['raw-loader']
      }
    ]
  },
  resolveLoader: {
    moduleExtensions: ['-loader'] // Needed until AWS update their crap
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

Hello, regarding new $.fn.DataTable.Editor.DateTime() I noticed that the selected date is actually a property on the instance.

This is making some plugin development pretty difficult for us. The OnChange event has no arguments so we can not properly set up hoods with the Editor DateTime Field.

Can you please pass the selected date back when you internally call OnChange?

I'm evaluating the accessibilty of DataTables for a project and I'm almost on-board, but the column visiblity menu control is an issue due to not conforming to the latest ARIA 1.1 authoring practices for menus. I want to help make your widget accessible for all users so I've listed what's done right and what needs work.

The good:
* Column visibility button utilizes the "aria-haspopup" attribute to indicate that a menu is attached.
* Menu container has the appropriate "menu" role.
* Keyboard focus returns to the column visibility button when closing menu with Esc key.

The bad:
* Column visibility button is missing the "aria-expanded" attribute.
* Menu item buttons are missing the role="menuitem" attribute.
* Menu item buttons should not be placed in tab order.
* Keyboard focus not set to the first menu item/button when the menu is opened.
* Menu displayed in what visibly appears as a modal dialog, but does not have dialog structure or expected keyboard interactions which is confusing from keyboard-only user perspective.

I suggest that the DataTables dev team take a look at the code examples from the W3C and from Heydon Pickering's Inclusive Components to ensure that the all users can interact with the column visibility menu.

Keep up the great work!

Hi there,

Let me sketch the situation first:
I have a building. In each building live multiple residents. Each resident can have one or more budgets. (They can also have no budgets)
I made an editable overview per building in which I summarise which resident spend which amount.

My problem:
I would like to link a budget to each expense (fieldtype: select), but stumble over the difficulty that each resident has a different list of budgets. I managed to update the budget list when I'm working with a pop-up (ajax), but inline-editing is a different story.
I'm currently working with the preOpen event but triggering the ajax that retrieves the budget list even when the budget list hasn't been clicked slows everything down. Is there a way to only trigger the ajax when the budget field has been clicked?

Thanks in advance,
Gloria

My datatables Editor is not working. I am using a trial version and also using select plugin for datatables.
My interface is
The example I am following is https://editor.datatables.net/examples/simple/inTableControls.html

My Code is:

    var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {

  editor = new $.fn.dataTable.Editor({
    "ajax": "../ajax/data/objects.txt",
    "table": "#example",
    "fields": [ 
        {
            "label": "ID:",
            "name": "id"
        },          
        {
            "label": "First name:",
            "name": "name"
        }, {
            "label": "Position:",
            "name": "position"
        }, {
            "label": "Salary:",
            "name": "salary"
        },          
        {
            "label": "Start date:",
            "name": "start_date",
            "type": "datetime"
        },          
        {
            "label": "Office:",
            "name": "office"
        }, 
        {
            "label": "Extension:",
            "name": "extn"
        }
    ]
    } );

// Edit record
    $('#example').on('click', 'a.editor_edit', function (e) {
    e.preventDefault();                 
    editor.edit( $(this).closest('tr'), {
        title: 'Edit record',
        buttons: 'Update'
    } );
    } );

// Delete a record
    $('#example').on('click', 'a.editor_remove', function (e) {
    e.preventDefault(); 
    editor.remove( $(this).closest('tr'), {
        title: 'Delete record',
        message: 'Are you sure you wish to remove this record?',
        buttons: 'Delete'
    } );
    } )

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

 dom: "Blfrtip",    
"ajax": "../ajax/data/objects.txt",     

"columnDefs": [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
"columns": [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },

{ "data": "id"},
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" },
        {
            data: null,
            className: "center",
            defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
        }
    ],

    //select: {'style': 'multi'},     
    select:true,     
          buttons: [        
    {
      text: 'Select All',
            key: '1',
            action: function ( e, dt, node, config ) {                  
                table.rows().select();
            }

    },

    {
      text: 'Deselect All',
            key: '1',
            action: function ( e, dt, node, config ) {
                table.rows().deselect();
            }       
    }


    ],
     "order": [[0, 'asc']]
     });

     $('#example tbody').on('click', 'td', function () {    /*

    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
         $('div.slider', row.child()).slideUp( function () {
        row.child.hide();
        tr.removeClass('shown');
         });
    }
    else {
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
         $('div.slider', row.child()).slideDown();
    }
*/});
} );

My imports are:

    <!--Datatables  Buttons-->
    <script src="../vendor/datatables-buttons/js/dataTables.buttons.min.js"></script>
<!--Datatables  Select-->
    <script src="../vendor/datatables-select/js/dataTables.select.min.js"></script>

<!--Datatables  Editor-->
    <script src="../vendor/datatables-editor/Editor/js/dataTables.editor.min.js"></script>

And CSS:

 <!-- DataTables Buttons CSS -->
<link href="../vendor/datatables-buttons/css/buttons.dataTables.min.css" rel="stylesheet">

<!-- DataTables Select CSS -->
<link href="../vendor/datatables-select/css/select.dataTables.min.css" rel="stylesheet">

<!-- DataTables Editor CSS -->
<link href="../vendor/datatables-editor/Editor/css/editor.dataTables.min.css" rel="stylesheet">

Banging my head for days on this.

I'm using the json-api spec for my API. The request and response structure is basically like this:

{
    data: {
        type: 'widgets',
        id:  5,
        attributes: {
            key: 'abc',
            name: 'Blue Widget'
        }
    }
}

DataTable works great, I can retrieve a list of widgets with this:

 vm.dataTable = $('#gridFields').dataTable({
            ajax: {
                url: ENV_CONFIG.API + '/fields',
                dataSrc: 'data',
                contentType: 'application/vnd.api+json',
                headers: {
                    'Authorization': "Bearer " + $auth.getToken(),
                    'Accept': 'application/vnd.api+json'
                }
            },
            buttons: [
                {extend: 'create', editor: editor},
                {extend: 'edit', editor: editor},
                {extend: 'remove', editor: editor}
            ],
            rowId: 'id',
            responsive: true,
            columns: [
                {data: "id", title: "ID"},
                {data: "attributes.key", title: "Key Field"},
                {data: "attributes.name", title: "Name"},
            ],
            columnDefs: [
                {
                    className: "width-20",
                    "targets": 0
                }
            ],
            select: true,
            bStateSave: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: 'Bflrtip'
        });

Editor works great, but row disappears after create or edit. Here is my editor and event:

editor = new $.fn.dataTable.Editor({
            ajax: {
                create: {
                    type: 'POST',
                    contentType: 'application/vnd.api+json',
                    url: ENV_CONFIG.API + '/fields',
                    headers: {
                        'authorization': "Bearer " + $auth.getToken(),
                        'accept': 'application/vnd.api+json'
                    },
                    url: ENV_CONFIG.API + '/fields',
                    data: function (d) {
                        id = Object.keys(d.data)[0];
                        var ownData = {
                            data: {
                                type: "fields",
                                attributes: d.data[id].attributes
                            }
                        };

                        return JSON.stringify(ownData);
                    }
                },
            /*
            //  Other methods omitted for readability
            */
            },
            table: '#gridFields',
            idSrc: 'id',
            fields: [
                {label: 'Field No', name: 'attributes.key'},
                {label: 'Field Name', name: 'attributes.name'},
            ]
        });
        editor.on('postSubmit', function (e, json, data, action) {
            if (action !== 'remove') {
                newJson = {};
                newJson.data = [{id: json.data.id, attributes: json.data.attributes}];
                json = newJson;
            }
        });

I'm at a loss. I'm pretty sure it's a mismatch in the structure but not sure. I don't think I have to have DT_RowId (I'm using "id"). I have read the server response spec, but I'm altering it to fit the DT column data.

Any ideas?

Hi everyone!!

I have problems with fixed column scroll, any help?

I attach image:

Thank you very much!!

Best regards!!

I've followed instructions to install and evaluate the examples for Editor. It does't work. I don't see any data. I don't see any data errors. I can't fine any logs. I can't find any trouble shooting guides for the database connection. I don't see any errors on the console about the connection or it's status. It talks about removing the error_reporting lines, but why? Nothing is being reported. Why not have an example RIGHT AT THE TOP for testing your database connection? Editor is base on DataTables, and they are heavily base on databases. WHY NOT MAKE CONNECTING AND DIAGNOSING those problems something to figure out? Why not have a forum search instead of site wide search?

I have datatable that generates data from serverside (JAVA/JSP). I have a column that is being displayed as childrow has an arraylist of items. right now it is being displayed as a single row ([........],[.........] etc.,)
I want them to be listed each in a separate row. Any help is appreciated

Hi there. I'm not sure what I am doing wrong here but when I click on the details contro,. the child row is dsiplayed but it pushed to a new column at the end of the data table.

Here is my code:

<div class="col-xs-4">
    <table id="exp_datatable" class="display ">
        <thead>
            <tr>
                <th>AccountNumber</th>
                <th>AccountCostCentre</th>
                <th>AccountDepartment</th>
                <th>Narrative</th>
                <th>TransactionAnalysisCode</th>
                <th>TaxType</th>
                <th>TaxCode</th>
                <th>Amount</th>
            </tr>
        </thead>
    </table>
</div>


<script>    

    $(function() {
        
        $tepTable = $('#exp_datatable').DataTable ( {
            ajax: { // doing it this way allows me to invoke ajax.reload
                url: '../ajax/transactions.php',
                type: 'POST',
                data: {action:'get export preview'},
                dataType: 'json',
                dataFilter: function(data){
                    var jData = JSON.parse(data);
                    var dtData =JSON.stringify( {"data": jData});
                    return dtData;
                }
            },
            responsive: true,
            columns: [
                        { data: "nom_code" },
                        { data: "account_cost_centre" },
                        { data: "account_dept" },
                        { data: "narrative" },
                        { data: "trans_analysis_code" },
                        { data: "tax_type" },
                        { data: "tax_code" },
                        { data: "amount" }
            ]
        });        
    });

    
</script>

My table looks like this:

And here it is with the child row displayed:

I'm really stuck so any help is very much appreciated. Thank you,

Lee

Hi
I am trying the example for scrollTo and does not seem to work
https://datatables.net/extensions/scroller/examples/initialisation/api_scrolling
It should point to record 1000 but does not move

Having the same problem with my program

Thanks
JF

How do you edit a forum post?

Id like to be able to search the forum for duplicate questions on specific topics so that I don't waste my time writing questions that have already been asked.

Trying to get the examples to work. No data. No connection information. No problem solving connection faqs.
Want to search the forums? No forum search, just site wide.
Want to check rules for forum search? Like rule #1 (usually) check for existing post with a search. INVALID LINK

WTF?

Is there a way to add a custom button in an editor.bubble? For example a button that says generate that jquery could generate a random string and put it in the edit box?

Please refer to https://datatables.net/examples/api/row_details.html and there is a table. Click on the green PLUS symbol. On the first line when I click, so you can see the whole information - what it contains. The problem is that when I hit the last line - when I click and then does not display all the information and I have to roll the mouse down to see the whole information. I ask, something can be programmed to do this: when I click on a green box - CHILD ROWS - it automatically recognizes it when the whole information is visible on the screen, nothing is happening. When not visible - it automatically rolls downwards to see the whole information.

So.. I'm having this issue where reorder works well and all but when I try to disable initial datatable sort by putting order: []. The RowReorder doesn't work as expected and whatever I drag goes back to its initial position when I drop it. So.. is there anyway to make those two work together?