"columns": [
                    { "data": "Store", "name": "Store" },
                    { "data": "Order", "name": "Order" },
                    { "data": "Sku", "name": "Sku" },
                    { "data": "Qty", "name": "Qty" },
                    { "data": "OrderedDate", "name": "OrderedDate" },
                    { "data": "TrackingInfo", "name": "TrackingInfo" },
                    {
                        "data":"OrderItemId" , "render" : function (data) {
                            return "<a href='#' class='btn btn-default' onclick='EditTrackInfo(" + data + ")'><span class='glyphicon glyphicon-edit'></span> Edit </a>";
                    },
                    
                    
                    

Hi - Here's my code. There's a table being rendered with a file size showing, 1mb, 24k, and so on. Does this code look right to do this ? I've attached the errror. It's in the columns definition line. Getting an unknown parameter. Any help would be appreciated. Thank you!

  if (!orderAttachmentsDTO[orderItemID]) {
        orderAttachmentsDTO[orderItemID] = $attachmentsTable.DataTable({
          destroy:true,
          data:itemAttachments,
          columns:[orderAttachmentsMap["type": "file-size", "targets": 2]],
          autoWidth:false,
          order: [[ 0, 'asc' ]],
          paging:false,
          dom:'ft',
          searching: false,
          language: {
            emptyTable: ax.L(911),
            zeroRecords: ax.L(911)
          }
        });

Here's the data coming back in the JSON response.

And the error.

Below is the code from the file-size.js

jQuery.fn.dataTable.ext.type.order['file-size-pre'] = function ( data ) {

var units = data.replace( /[\d\.\s]/g, '' ).toLowerCase();
var multiplier = 1;

if ( units === 'kb' ) {
    multiplier = 1000;
}
else if ( units === 'mb' ) {
    multiplier = 1000000;
}
else if ( units === 'gb' ) {
    multiplier = 1000000000;
}
else if ( units === 'tb' ) {
    multiplier = 1000000000000;
}
else if ( units === 'pb' ) {
    multiplier = 1000000000000000;
}
return parseFloat( data ) * multiplier;
};

Hello,

I have problem with editor plugin. I want to implement editor plugin as here: https://editor.datatables.net/examples/inline-editing/columns.html

But i am getting javascript errors like this:

popup.js:7 Uncaught TypeError: Cannot read property 'getSelected' of undefined
at popup.js:7
pace.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

jquery-1.12.4.js:9747 Uncaught ReferenceError: define is not defined
at eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1:5742)
at eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1:7850)
at eval (<anonymous>)
at jquery-1.12.4.js:349
at Function.globalEval (jquery-1.12.4.js:350)
at text script (jquery-1.12.4.js:10372)
at ajaxConvert (jquery-1.12.4.js:9332)
at done (jquery-1.12.4.js:9789)
at callback (jquery-1.12.4.js:10311)
at Object.send (jquery-1.12.4.js:10321)

my view file is like this:

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/datatables.editor/editor.dataTables.min.css" rel="stylesheet" type="text/css">

table id="example" class="display" cellspacing="0" width="100%">
thead>
tr>
th></th>
th>ID</th>
th>XXX</th>

        /tr>
    /thead>

/table>

script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js" type="text/javascript"></script>

script src="assets/js/plugins/datatables.editor/dataTables.editor.min.js" type="text/javascript"></script>
script src="assets/js/plugins/datatables.editor/custom.js" type="text/javascript"></script>

when i put first line alert("hello") into my custom.js file it doesn't work but when i put it to first line of dataTables.editor.min.js file, it works so i suppose the problem is inside the dataTables.editor.min.js file which i downloaded it from editors official site.

I looked for if i include multiple times of javascripts but everything seems correct.

I read a lot in the forums but did not find any solution.
Is there a way to solve this problem?

Hello, I was looking for a solution to load data on demand (button click), and found this example here: https://datatables.net/forums/discussion/24379/load-data-in-datatable-from-ajax-through-button-click.
While everything is working great - data is loading and populating, the first column in my table is a checkbox column and I don't know how to map this column to the data that I'm receiving from the server.

HTML Table:

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTable">
    <thead>
        <tr>
             <th></th>
             <th>Name</th>
             <th>IP</th>
             <th>Create-Date</th>
             <th>Expiration-Date</th>
             <th>State</th> 
             <th>UUID</th>
       </tr>
  </thead>

  <tbody>
  </tbody>
 </table>

This is my init

function initTable() {
                return $('#dataTable').DataTable({
                    //responsive: true,
                    data: [],
                    columns: [
                        { "data": "???" },  //checkbox should be here!!!
                        { "data": "vm_name" },
                        { "data": "vm_IP" },
                        { "data": "create_date" },
                        { "data": "expiration_date" },
                        { "data": "vm_state" },
                        { "data": "vm_uuid" }
                    ],
                    order : [[ 1, "asc"]],
                    columnDefs : [
                        {
                            orderable : false,
                            className : 'select-checkbox',
                            targets : 0
                        },
                    ],
                    //rowCallback: function(row, data){},
                    retrieve : true
                });
            }

this is AJAX code:

$.ajax({
                type: 'POST',
                url: "/listexpvms",
                cache: false,
                data: {
                    data: email
                },
                dataType: 'json',
                success: function( data ){
                    table.clear().draw();
                    table.rows.add(data).draw();
                },
                error: function() {
                    console.log("Something went wrong while getting list of VMs");
                }
            }); 

The data comes from a database.

Hi,

I have a history.vue file. In order to implement searchPane plugin from datatable I did the following:

I added the two files that are required:
//cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.css
//cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.js

Then at the place where DataTable is implemented
I changed the line from this.history_table = $('#history-table').DataTable(this.params.history);
to this.history_table = $('#history-table').DataTable( {data:this.params.history, searchPane:true} );

But, after this change my history table disappeared and I don't know how to proceed.

Please help.

I see this issue was listed earlier in the following example: https://datatables.net/forums/discussion/comment/101190/#Comment_101190

The screenshot above is from the live example here. https://jsfiddle.net/65jLxjm2/5/

I am not sure if a response resolved this issue:

Best Regards,
Sumit.

It took me a while to track it down but here is what I think is happening.

If I create a custom type that has it's own sort AND there are over 10 items AND you are using Chrome the sort result is in the wrong order.

https://jsfiddle.net/paulhildebrandt/Lzb1ot8o/2/

Is this a bug or have I overlooked something simple?

I have a table which retrieves JSON data using Ajax much like in this example https://datatables.net/examples/ajax/objects.html with the only difference being I had to include the following to account for the lack of a name for my list of objects. Below shows my code.

$(document).ready(function(){  
      var tables = $('#data2').DataTable({  
          "ajax" : {   
              url: 'gameseek.json',
              dataSrc: ''
        }, 
          "dom": '<"top"i>rt<"bottom">p<"clear">',
          "pagingType" : "simple",
          "columns"     :     [  
                {     "data"     :     "name"     },     
                {     "data"     :     "price"}  
           ]  
      });
});

The issue i'm having is that in this particular JSON file there's about 200 objects that have null as both fields, "name" and "price" meaning the first few pages of my table are just empty fields. Is there a way of hiding/not loading those rows? Hiding a row where "name" = null would have the same effect so if that's easier i'm happy to do that.
Thank you

Hello, I implement interface for my small CRUD app and would like to send a json in all create, edit and remove requests. Json is sent at create and edit, but data is sent in delete as query parameters.

My js file:

var editor;
var table;

const getDataCreateEdit = function () {
    let data = $.extend(editor.val(), {entity:'author'});

    return JSON.stringify(data);
};

const getDataRemove = function (obj) {
    let id = Object.keys(obj.data);

    if (id.length > 1) throw 'To many ids';

    let data = {
        entity: 'author',
        id: Number(id[0])
    };

    return JSON.stringify(data);
};

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'PUT',
                url: '/api/v1/entity/author',
                contentType: 'application/json',
                dataType: 'json',
                data: getDataCreateEdit
            },
            edit: {
                type: 'PATCH',
                url: '/api/v1/entity/author',
                contentType: 'application/json',
                dataType: 'json',
                data: getDataCreateEdit
            },
            remove: {
                type: 'DELETE',
                url: '/api/v1/entity/author',
                contentType: 'application/json',
                dataType: 'json',
                data: getDataRemove
            }
        },
        table: "#authors",
        idSrc: 'id',
        fields: [
            {
                label: "Second Name:",
                name: "second_name"
            }, {
                label: "First Name:",
                name: "first_name"
            }, {
                label: "Patronymic:",
                name: "patronymic"
            }, {
                label: "Date of Birth:",
                name: "date_of_birth",
                type: "datetime"
            }, {
                label: "Country:",
                name: "country"
            }, {
                label: "Degree:",
                name: "degree"
            }
        ]
    } );


    table = $('#authors').DataTable({
        dom: 'Bfrtip',
        orderMulti: true,
        scrollY: 600,
        scrollCollapse: true,
        paging: false,
        ajax: {
            url: '/api/v1/entity/author',
            dataSrc: 'entities'
        },
        columns: [
            { data: 'second_name' },
            { data: 'first_name' },
            { data: 'patronymic' },
            { data: 'date_of_birth' },
            { data: 'country' },
            { data: 'degree' }
        ],
        select: true,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit', editor: editor },
            { extend: 'remove', editor: editor }
        ]

    });
});

And this is how my request parameters look like

!

Hello all,

I'm trying to populate a select element in editor with contacts but I only want to see the contacts belonging to the company(dealer) I select and edit instead of all of them. So I have to select only the contacts with a particular dealernr, how can I get this value in the query? this is the code I have

        Field::inst( 'bezoekverslagen.dealercontacts_id' )
            ->options( Options::inst()
                ->table( 'dealercontacts, bezoekverslagen' )
                ->value( 'dealercontacts.dealercontacts_id' )
                ->label( array('dealercontacts.initials', 'dealercontacts.firstname', 'dealercontacts.lastname') )
                ->where( function ($q) {
                    $q->where( 'xstop', 0 );
                    $q ->where('dealercontacts.dealernr', 'bezoekverslagen.dealernr'); 
                })
            )
            ->validator( 'Validate::dbValues' )

It's not working this way. The dealernr is in the row I select and want to edit, when editing I don't want to see all contacts, only thos that belong with that particular dealernr. How can I get this value? I hope someone can help, Thanks!!

Hi. How can I use TableLength with this: https://datatables.net/extensions/buttons/examples/column_visibility/stateSave.html ?
When I use it table length just disappear. How can I use they together?

Hi Team,

Can I search multiple columns using OR condition? Right now when I use

table.columns([0,1]).search('ab').draw();

it expects the text need to be in both columns. But I need to show if it exists atleast in 0 or 1 column. Please help.

Hello,

Thank you for this amazing Data Table plug in.

I run into this problem when i load the Data Table using Ajax. I have two links on the side panel. One is Feeds and other one is Contacts. Clicking Feeds will bring a Data Table with a fixed header. That's working fine. But when i bring up the Contacts by clicking 'contacts' link and when i scroll down the page, the fixed header from feeds page pops up.

It shouldn't pop up as a Data Table doesn't exist on contacts page. I have no idea why.
This is bothering me since a week. A help is much appreciated.

Here is the link to the problem - http://live.datatables.net/sifitova/1/edit
Debug code - olenam

Here is my ajax code

 function CallPage(link) {

        $.ajax({

            url: link,
            type: "GET",

            success: function(response) {

                $(".main-content").html(response);

                var table = $('#myTable').DataTable({
                    fixedHeader: true,
                    "pageLength": 50,
                    language: {
                        search: "<b>Filter for rows: </b>",
                        searchPlaceholder: "Type something.."
                    }
                });
            },

            error: function(jqXHR, textStatus, error) {
                console.log('The page was not loaded', error);
            }

        });
    }

Hi,

is it possible to store the user id directly in the file ** table without using an extra **users_files (https://editor.datatables.net/examples/advanced/upload-many.html )

I mean like this:

->join(
         Mjoin::inst( 'files' )
             ->fields(
                 Field::inst( 'id' )
                     ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/upload/__ID__.__EXTN__' )
                         ->db( 'files', 'id', array(
                             'user_id'    => 'users.id',
                             'filename'    => Upload::DB_FILE_NAME,
                             'filesize'    => Upload::DB_FILE_SIZE,
                             'web_path'    => Upload::DB_WEB_PATH,
                             'system_path' => Upload::DB_SYSTEM_PATH
                         ) )
                         ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                         ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
                     )
             )
     )
     ->leftJoin( 'sites', 'sites.id', '=', 'users.site' )

I removed the ->link two times and added the user_id in the db area.

How can I submit the user id to the db area?

Is it possble to get a solution only with the users and files table (without an extra link with the users_files table)?

Thanks in advance

Hi
I would like to let user input varchars including the Ampersand symbol (&) via Editor. In the database (php server side) it should stored the & symbol and NOT converted to & amp ;

The reason is as this db table will also be used by other applications which are not webbased.

Is there a way to store the & symbol in db ? I know of the server side function ->xss(false) , but I dont want to fully disable XSS protection, so can I just use a render function on the data table? How to do?

Best regards
Marwi

I have created a Angular 4 with dot net core application using visual studio template. I want to use datatables in my app and tried to follow steps using https://l-lin.github.io/angular-datatables/#/getting-started
But I received error as : ReferenceError: $ is not defined. I tried to use import * as $ from "jquery"; But did not work.

I am using Editor-1.7.3 with https://editor.datatables.net/plug-ins/field-type/editor.select2 plug-in and Select2 Bootstrap theme https://github.com/select2/select2-bootstrap-theme.
The demo can be viewed at https://nfctech.eu/datatables/editor-select2-bootstrap.html.
When I click on the "New" button and the form modal opens, the use of Select2 Bootstrap theme breaks the select field.
The code used in the demo is

{
            "label": "NAZIONE*:",
            "name": "nazione",
            "type": "select2",
            "options": [
              "Italia",
              "Francia",
              "Germania",
              "Russia",
              "Stati Uniti"
            ],
            "opts": {
            "placeholder": "Seleziona una nazione",
            "allowClear": true,
            "theme": "bootstrap"
            }
          },
          {
            "label": "AREA*:",
            "name": "area",
            "type": "select2",
            "options": [
              "Francia",
              "Nord Italia",
              "Russia",
              "Americhe"
            ],
            "opts": {
            "placeholder": "Seleziona un'area di competenza",
            "allowClear": true,
            }
          },

where the select "NAZIONE" makes use of the Select2 Bootstrap theme and the select "AREA" no.
As you can see from the demo,:
- the select "NAZIONE" has no border at all and the Bootstrap theme is applied only partially when the select is opened
- the select "AREA", that does not use the Select2 Bootstrap theme, is displayed correctly according to the default Select2 theme.
I checked the implementation and it seems correct. Any idea about the cause of this issue?
Thanks

I've got a search box on my page that updates data in a datatable. Here is the code:

var baseURL = "/api/Reservations?CustomerId=";

$("#btnSearch").on("click",
            function () {
                var custEmail = $("#txtEmail").val();
                var customer = $.ajax(
                    {
                        url: "/api/Customers?email=" + custEmail,
                        data: "",
                        success: function (customer) {
                            var ajaxurl = baseURL + customer.id;
                            var ajaxobj = {
                                url: ajaxurl,
                                dataSrc: ""
                            };
                            dt.ajax.url(ajaxobj).load();
                            dt.clear().draw();
                        },
                        error: function () {
                            bootbox.alert("Doesn't look like you've made any bookings.");
                        }
                    });
            });

When I load the page, enter an email address in my searchbox and click the button, everything works perfectly. It searches the customer, retrieves the bookings and populates the table.

The request it makes to the reservations API looks like this:

http://localhost:55601/api/Reservations?CustomerId=6&_=1522178504857

(I'm not sure how or why &_=1522178504857 gets appended, but it doesn't seem to be affecting it so I'll come back to that...)

However, if I click the search button a second time, the customer is still retrieved correctly, however request to the reservations API looks like this:

http://localhost:55601/Reservations/[object%20Object]?_=1522178504858

(URLs in both cases I've retrieved from developer tools).

Just to show what happens:

Why? What have I done wrong?

EDIT: updated code formatting using Markdown

Apologies if this has been answered, but I have not been able to find how to perform a multi column search in datatables editor instead of the default layout which provides a single all-column search? TIA.

I have most of my DT options brought back via JSON and I'm looking to do even more with that. As a quick example I have JSON that passes configuration options for columns, datatables itself as well as the data. I'm doing all of this to keep my front end logic fairly minimal if possible.

To aid this, I want to do more complex tasks like returning a function definition within JSON and running that. For example, I'd like to use a render function (https://datatables.net/manual/data/renderers) on the fly. I've used the ellipsis plugin before so that would be one example that I'd like to be able to pass it back and be recognized as JSON. Right now it throws the unrecognized parameter error. I tried passing a function back as JSON but that isn't picked up either.

I loosely know that JS allows a function to be created on the fly using something like new Function(JSON) so I'm wondering if that could be used to aid in what I'm trying to do. I've also tried defining the function in JS and trying to have the render option call it, such as column.render = testFormat(data,type,row) but no luck with that either.

Is there a way either with a combination of DT options or using the API that I can return a dynamic function and have DT recognize it? Has anyone ever done this?