I'm using Datatables with Django REST Framework. When the table is initiated it sorts on the correct column (order: [[0, 'asc']]), however when I click the column icon arrow, the arrow changes however no change to the data. This happens with every column. My js code is below. Anything obvious I'm doing wrong?

  <script type="text/javascript">

    var editor;
    $(document).ready(function() {

        editor = new $.fn.dataTable.Editor( {
            table: "#object-table",
            ajax: {
                create: {
                    type: 'POST',
                    url:  "{% url 'facility-list' format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                },
                edit: {
                    type: 'PUT',
                    url:  "{% url 'facility-detail' pk=None format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                },
                remove: {
                    type: 'DELETE',
                    url:  "{% url 'facility-detail' pk=None format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                }
            },

            idSrc:  'facility.bldgcode',

            fields: [
                { label: "Building Code:", name: "facility.bldgcode" },
                { label: "Name:", name: "facility.name" },
                {
                    label: "Category:",
                    name: "facility.category",
                    type: "select"
                },
                {
                    label: "Location:",
                    name: "facility.location",
                    type: "select"
                }
            ],

            i18n: {
                create: {
                    button: "Add",
                    title:  "Add new facility",
                    submit: "Add"
                },
                edit: {
                    button: "Edit",
                    title:  "Edit facility details",
                    submit: "Update"
                },
                remove: {
                    button: "Delete",
                    title:  "Delete facility",
                    submit: "Delete",
                    confirm: {
                        1: "Are you sure you want to delete the selected facility?"
                    }
                }
            }

        } );

        $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn btn-sm btn-primary';
        var table = $('#object-table').DataTable( {

            pageLength: 10,
            order: [[0, "asc"]],
            processing: true,
            serverSide: true,
            dom: "lBfrtip",
            ajax: "{% url 'facility-list' format='datatables' %}",
            select: 'single',

            columns: [
                { data: "facility.bldgcode", orderable: true },
                { data: "facility.name", orderable: true },
                { data: "category.name", orderable: true },
                { data: "location.name", orderable: true }
            ],

            buttons: [
                { extend: "create", editor: editor},
                { extend: "edit",   editor: editor},
                { extend: "remove", editor: editor}
            ]

        });

        table.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table.table().container()));

        editor.field('facility.category').input().addClass('form-control');
        editor.field('facility.location').input().addClass('form-control');

    });

  </script>

Thanks,
mgpearce48

how to make serial number wise data table like
1.0
1.1
1.2
..
.
1.10
1.11
And so on

I have a custom made filter function on my website where I am using one of your datatables. When initializing the datatable one can add parameters with the "data" option. I want to do this, but only if search terms are provided. The amount of search terms and their key-value pairs will be known at runtime which is why I can't define them at datatable initialization.

I am basically looking for a possibility to simply add (remove) up to n parameters to (from) the request url:

exampleUrl?draw=1&columns...&key1=value1&...&keyN=valueN&_=1581171459716

I know about the option to add parameters at runtime by using a function for "data", but I didn't understand how to use it in my case. Maybe someone can provide an example of how to do this.

So in one of my child rows, I've got a variable that will output a number. This number, I am trying to compare to data in a const and output the matching one in place of the original variable (in my case, round.number). Its stumping me a bit bc of how its within a child row of datatables. Here is an example showing the child rows:

http://live.datatables.net/zavoloqo/2/edit

And this is the const that I'm trying to use to compare/replace with round.number to const number as shown below:

// Index of 0 to 51 : ♦2 to ♣A ( ie. '4' equates to ♦3 )
    const CARDS = [ 
      ♦2, ♥2, ♠2, ♣2, ♦3, ♥3, ♠3, ♣3, ♦4, ♥4,  
      ♠4, ♣4, ♦5, ♥5, ♠5, ♣5, ♦6, ♥6, ♠6, ♣6, 
      ♦7, ♥7, ♠7, ♣7, ♦8, ♥8, ♠8, ♣8, ♦9, ♥9, 
      ♠9, ♣9, ♦10, ♥10, ♠10, ♣10, ♦J, ♥J, ♠J, 
      ♣J, ♦Q, ♥Q, ♠Q, ♣Q, ♦K, ♥K, ♠K, ♣K, ♦A, 
      ♥A, ♠A, ♣A 
    ]; 

// Game event translation ( output from round.number = CARDS[Math.floor(float * 52)] )
    const number = CARDS[Math.floor(float * 52)];

Hi guys,

Instead of clicking cell one by one with cell().data
Is there a way to get the list of string out of row().data ?

I read from that forum that the Row() is Object Data.
And when I try to
$('#example1 tbody').on( 'click', 'td', function () {
var allrow = table.row(this).data();
alert( allrow );
} );

The alert show the row that I clicked like thisRowCell1,thisRowCell2,hellworld
all separated with ","

I tried to split the text using "," and I still fail.
I do not want to go all the way using ID, Ajax to handle this. (because I'm very new to programming)

I simply, just want to be able to click certain row and that
thisRowCell1 is pasted in other target (#id)
while thisRowCell2 show in another target. (#id)

Thank you in advance !

Here's the returned json:
[{
"name":"2017 Dues",
"bill_yr":"2017",
"status":"inactive",
"schedules":[["sched A"],["sched B"],["sched C"],["sched D"]
]},
{
"name":"2018 Dues",
"bill_yr":"2018",
"status":"
"schedules":[["sched A"],["sched B"]
]},

Here's ajax:
$('#example').DataTable( {
processing: true,
select: true,
ajax:
{
"url": "../results.php",
"type": "post",
"data": {
"cycles": "submitted",
"key": "123"
},
"dataType": 'json',
"dataSrc": "",
},
columns:
[
{"data": 'name'},
{"data": 'bill_yr'},
{"data": 'status'},
{"data": "schedules"} ** What to do here to iterate over schedules? **
]
});

I would like to have a row like this:
2017 Dues | 2017 | inactive | sched A <br /> sched B

I'm using the PHP SQL library on an apache server and am trying to test from localhost. However, I keep getting XMLHttpRequest blocked by CORS policy

How do I add a Access-Control-Allow-Origin' header to the response?

Thanks

Hi,

I do not have an example as I have not actually sure where to start in this process.
Using DataTables, I have now been able to pass data in the form of 2D arrays. The data is sourced from a database but not in the format where one table row designated one model instance. Rather each cell is a different model.
I can easily send the data as orthogonal data, where one layer would be the primary keys for each instance.
I have not however been able to find some examples or documentation where I can get editor to send back simply the value and primary key.
I suspect there is a function one could call to manually implement the POST process having been returned the data of the cell for which the editor was opened.
This would be in the context of inline editing.

Thank you for any help or assistance, it would be great
Best,
Max

I've been utilizing DataTables client side by processing a JSON file and rendering it via ajax into the table. My question is, what are the limitations when it comes to rows of data when using purely client-side? So far, I've tested with around 800,000 entries and once it was loaded it seemed very quick still. The uploading process seemed to slow down though somewhere in the code the more files I appended to the existing data.

Anyhow, is 800k getting to a point where I should start looking at a SSP solution? I definitely plan on moving to SSP, i'm just trying to gauge when I need to do this. And of course theres the added benefits of being able to save the JSON data for the end user under their own account. Thing is, I know this will be a big project so I'm trying to make do with what I've got for now if possible.

So currently, the datatable will sort in ascending order (lowest to highest) by default on first click of any column header. How would I go about setting it to sort by descending instead on first click (highest to lowest)?

When the table is empty, the "Next" button is not disabled in the pagination region. The "Previous" button is disabled. Should the "Next" button also be disabled if the table has no data?

An example is at http://live.datatables.net/wixenafe

Hi All,
to ask the underlying, next question, I first of all wonder where my buttons did disappear.
https://jsfiddle.net/RoloTomasi/cexy6La5/ If I test this locally, the buttons are visible.
Can you help me?

Thanks in advance
Rolo

I want to filter result records by a keyword. But when I enter a keyword, data-table always display "No matching records found" message.

It should display related record matching keyword typed by user.

LIVE Demo: http://live.datatables.net/payuteka/1/watch?html,css,js,console,output

Not sure my HTML markup is missed up or what can be the issue that search filter isn't working?

i have been trying to have separate button click event and row click event. how ever when i try to edit a tuple using a button click event row click event triggers.

Below is my table loading and row click event.

$(document).ready(function () {
            var dataTable;
            $('#Person').parsley();

            $.ajax({
                url: "/Details/GetAllDetails",
                type: "Get",
                datatype: "json",
                success: function (data) {

                    dataTable = $("#persondatatable").DataTable({
                        select: true,
                        data: data,
                        columnDefs: [
                            {
                                "click": false, "targets": [6],
                                "width": "24%"
                            }
                        ],
                        columns: [
                            { "data": "Id", "visible": false },
                            { "data": "Firstname" },
                            { "data": "LastName" },
                            { "data": "PhoneNo" },
                            { "data": "Email" },
                            { "data": "SSN" },
                             {
                                 "data": "Id", "render": function (data) {

                                     return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'

                                 }
                             }
                        ],

                    })

                        $('#persondatatable tbody tr').on('click', function (e) {

                            e.stopPropagation();
                            var datalist;

                            var id = dataTable.row(this).data().Id;

                            $.ajax({
                                type: 'Post',
                                url: "/Details/ViewDetails/" + id + " ",
                                success: function (data) {

                                    FirstName.textContent = data[0].Firstname,
                                    LastName.textContent = data[0].LastName,
                                    Address.textContent = data[0].Address,
                                    DOB.textContent = data[0].DOBString,
                                    Email.textContent = data[0].Email,
                                    Phone.textContent = data[0].PhoneNo,
                                    SSN.textContent = data[0].SSN
                                }
                            })
                        });
                    } 
                
            });
        }) 

shown below is my edit table function

  function editdetails(id) {
            $('#Person').parsley().reset();
            $.ajax({
                url: "/Details/Edit/",
                type: "POST",
                data: JSON.stringify({ id: id }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var id = data[0].Id;
                    $('#id').val(data[0].Id),
                    $('#firstname').val(data[0].Firstname),
                    $("#lastname").val(data[0].LastName),
                    $('#address').val(data[0].Address),
                     $('#dob').val(data[0].DOBString),
                    $('#email').val(data[0].Email),
                      $('#phone').val(data[0].PhoneNo),
                    $('#ssn').val(data[0].SSN)
                }
            });
        } 

I am new to programming and I have been trying this for days and still i can't get this data table to refresh after save and update. I used table.ajax.reload() function but it didn't help either.

 if ($('#Person').parsley().isValid()) {

                    var Id = $("#id").val();
                    var FirstName = $("#firstname").val();
                    var LastName = $("#lastname").val();
                    var DOB = $("#dob").val();
                    var SSN = $("#ssn").val();
                    var Email = $("#email").val();
                    var Address = $("#address").val();
                    var PhoneNo = $("#phone").val();


                    var Person = {
                        id: Id,
                        firstname: FirstName,
                        lastname: LastName,
                        dob: DOB,
                        ssn: SSN,
                        email: Email,
                        address: Address,
                        phoneno: PhoneNo
                    };

                    if (Id =="") {
                        $.ajax(
                        {
                            type: "POST",
                            url: "/Details/SavePerson",
                            data: JSON.stringify(Person),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            beforeSend:function(){
                                $('#btnSubmit').attr('disabled', 'disabled');
                            },
                            success: function (data) {
                                $('#Person')[0].reset();
                                $('#btnSubmit').attr('disabled', false);
                                $('#btnSubmit').val('Submit');
                                dataTable.ajax.reload();
                                swal("Done!", "Data has been Saved.!", "success");
                                
                            }
                        }
                       );
                    }
                    else {
                        $.ajax(
                         {
                             type: "POST",
                             url: "/Details/Update",
                             data: JSON.stringify(Person),
                             contentType: "application/json; charset=utf-8",
                             dataType: "json",
                             beforeSend: function () {
                                 $('#btnSubmit').attr('disabled', 'disabled');
                             },
                             success: function (data) {
                                 $('#Person')[0].reset();
                                 $('#btnSubmit').attr('disabled', false);
                                 $('#btnSubmit').val('Submit');      
                                 swal("Done!", "Data has been Updated.!", "success");
                                 ("#persondatatable").Datatable.ajax.reload();
                             }
                         })
                    }
                    $('#Person').parsley().reset();
            }

code for my datatable is

 $(document).ready(function () {
            var dataTable;
            $.ajax({
                url: "/Details/GetAllDetails",
                type: "Get",
                datatype: "json",
                success: function (data) {

                    dataTable = $("#persondatatable").DataTable({
                        select: true,
                        data: data,
                        columnDefs: [
                            {
                                "click": false, "targets": [6],
                                "width": "24%"
                            }
                        ],
                        columns: [
                            { "data": "Id", "visible": false },
                            { "data": "Firstname" },
                            { "data": "LastName" },
                            { "data": "PhoneNo" },
                            { "data": "Email" },
                            { "data": "SSN" },
                             {
                                 "data": "Id", "render": function (data) {

                                     return '<a class="btn btn-primary" style="margin-left:30px"  onclick="editdetails(' + data + ')">Edit</a>   <a class="btn btn-danger" style="margin-left:5px; margin-right:-15x" onclick="deletedetails(' + data + ')">Delete</a>'

                                 }
                             }
                        ],

                    })

                        $('#persondatatable tbody tr').on('click', function (e) {
                            var datalist;

                            var id = dataTable.row(this).data().Id;

                            $.ajax({
                                type: 'Post',
                                url: "/Details/ViewDetails/" + id + " ",
                                success: function (data) {

                                    FirstName.textContent = data[0].Firstname,
                                    LastName.textContent = data[0].LastName,
                                    Address.textContent = data[0].Address,
                                    DOB.textContent = data[0].DOBString,
                                    Email.textContent = data[0].Email,
                                    Phone.textContent = data[0].PhoneNo,
                                    SSN.textContent = data[0].SSN
                                }
                            })
                        });
                    } 
                
            });
        })

Hi All,

this is what I want: https://datatables.net/extensions/searchpanes/examples/advanced/columnFilter.html. I think the usual Search pane is too big.

But I need the filtering above the table not underneath. The user shouldn't enter the site scrolling and scrolling (Generally I show the complete table) in order to state: "Hey, here are the filters! Why aren't they at the beginning of the table?"

To put the footer above the table won't do it. ;-)
Is there a possibilty to get it above the table?

Thanks in advance
Rolo

I'm down the rabbit hole on this one.

I have a nested array. The nested array (schedules) has multiple schedules for each outer array (cycles). I need to loop through "schedules" and display every schedule returned for each cycle . So each row will have a schedules column with a list of linked schedules.

View code here:
live.datatables.net/jibedupu/2/edit?html,js,console,output

Thanks!

Hello,

i have a problem with the npm package "datatables.net-editor-bs4".

The file ~datatables.net-editor-bs4/js/editor.bootstrap4.js has two places (line 8 and 21) where it requires the package "datatables.net-bs".
=> Shouldn't it require the package "datatables.net-bs4"?

I fixed the problem by adding an alias for it in my webpack config.

Best regards
Furkan

Hi
Does the editor generate one sql statement for bulk insert or does it doing one insert at time for bulk insert to the database table ??

Hi,
will be supported MDC for web instead of MDL as this is outdated and no more updated by Google, since they are focusing on this lib.
Thanks