I have functionality for File Export which I Created Using Collections. As Shown in Image When I click on Button Like PDF It Exports Datatable As PDF File.

I Want This Functionality In Dropdown Change Event. So How Can I Achieve this?
Here Is My Code.

buttons: [
{
extend: 'collection',
text: 'Save & Column Visibility',
autoClose: true,
buttons: [
{ text: 'Copy', extend: 'copyHtml5'},
{ text: 'Excel', extend: 'excelHtml5'},
{ text: 'CSV', extend: 'csvHtml5'},
{ text: 'PDF', extend: 'pdfHtml5'},
{ text: 'Print', extend: 'print' }
],
fade: true,
}
],

And Here Is My Code For Dropdown.

        $('<div class="pull-right">' +
            '<select id="dropdown" name="dropdown" class="form-control">' +
            '<option value="copy">Copy</option>' +
            '<option value="excel">Excel</option>' +
            '<option value="csv">CSV</option>' +
            '<option value="pdf">PDF</option>' +
            '<option value="print">print</option>' +
            '</select>' +
            '</div>').appendTo("#tbMenu_wrapper .dataTables_filter");
        $(".dataTables_filter label").addClass("pull-right");
    });```

Hello,

I tried to restore full search when back to the page (pagination, page number, filters, search) but i got problems

$table.page(2).draw('page');

and

$table.page(2).draw(false);

But both methods draws to the first page of results. So i can't get back to the correct page

I don't know why? In the docs, it's the right way to do it.

It's the same for the select2 filters and datepicker filters.

Does somebody have an example of full search restore?

I'm on version 1.10.19

Thank you for any help

Hello Guys
I need your help.

I would like to build a datatable as shown in the picture.
The (x) represents the selection i made. The (x) can also be a checkbox.

What i need is a datatable with multiple checkboxes in multiple cells, just like in excel

Thanks for your help
Regards
Heveen

Hello,

I am using Datatable JS with 1.10.18 and i want to use fixed header functionality so can you please let us know which version i need to download of fixed header js and css file. I have used 3.1.5 but didnt work

I am using Datatables / Editor for almost a year, and am getting fairly comfortable with it, but I still run into issues on occasion.

In this case, I'm trying to initialize the pageLength of a table with a value supplied as a user preference. This is not working correctly. The first page is correct per the setting of the user preference, but clicking any of the numbered page buttons, or 'Next' or 'Previous' displays the entire table, although indicator of what should be displaying is correct. If I change the 'pageLength' using the on-screen selector widget, things behave correctly for that setting and paging then works correctly thereafter, for any setting. It is only when trying to use the 'pageLength' passed in from the user's preferences that it fails.

I retrieve the user preference on the server and embed it in the HTML for the page, and it appears there, correctly. My problem is getting that value into the DataTable definition.

In my javascript that defines the table, I have the following:

            lengthChange: true,
             'pageLength':  function() {
                    var itPageLen = $('#itPageLen').attr('data-pagelength');
                    if (itPageLen === 'All') {
                        itPageLen = -1;
                    }
            },
            'lengthMenu':   [[10,25,50,100,-1],[10,25,50,100,'All']],
            'language': {
                'decimal':  '.',
                'thousands':    ','
            },

In the HTML, I have the following:

        <div id="itRole" data-itRole="tech"></div>
        <div id="itPageLen" data-pagelength=All></div>

The program always sets 'data-pagelength' to one of the values in the 'lengthMenu', so there is no mismatch, and no matter which one I use, it always displays the first page correctly and behaves incorrectly in the same way as described above whenever I use any of the paging buttons. I've tried a couple of other ways of initializing 'pageLength', but I always get the same incorrect behavior.

My use of the similar parameter, 'itRole', which affects other behavior , works correctly, which makes this more puzzling.

What is a correct way of passing and using this information?

Thanks in advance,
Tom

Hi, when I'm trying to upload a file I have an error: "File uploaded to a field that does not have upload options configured". Help me please

Controller:

public ActionResult JTovar()
        {
            var request = System.Web.HttpContext.Current.Request;
            var settings = Properties.Settings.Default;
            using (var db = new DataTables.Database(settings.Dbtype, settings.DbConnection))
            {
                var response = new Editor(db, "Tovar", "id")
                    .Model<ModelTovar>()
                    .Field(new Field("Tovar.id"))   
                                     
                    .MJoin(new MJoin("image")
                            .Link("Tovar.id", "interImage.idTovar")
                            .Link("image.id", "interImage.idImage")
                    .Model<MjoinImageTovar>()
                    .Field(
                       new Field("Tovar.Links")                                     
                           .Upload(
                           new Upload(request.PhysicalApplicationPath + @"uploads\__ID____EXTN__")
                           .Db("image", "id", new Dictionary<string, object>
                           {
                              {"fileName", Upload.DbType.FileName},
                              {"fileSize", Upload.DbType.FileSize},
                              {"webPath", Upload.DbType.WebPath},
                              {"systemPath", Upload.DbType.SystemPath}
                           })
                           .Validator(Validation.FileSize(50000000, "Max file size is 500000K."))
                           .Validator(Validation.FileExtensions(new[] { "jpg", "png", "gif","html","htm" }, "Please upload an image or html file."))
                                  )
                          .SetFormatter(Format.NullEmpty())
                            )                  
                          )
                    .Process(request)
                    .Data();
                return Json(response, JsonRequestBehavior.AllowGet);
            }
        }

{
                label: "Links:",
                name: "Tovar.Links",
                type: "uploadMany",
                display: function (id) {
                    return '<img src="' + editor.file('image', id).webPath + '"/>';
                },
                noImageText:'No image'
            }
------------------------------------------------------------------------------------------------------
{
             data: "Tovar.Links",
             render: function (data)
             {
                 console.log(data);
                 return data?             
                      data.length + ' files(s)' :
                       'No file';
             },
             title: "Image"
         }
--------------------------------------------------------------------------------------------------------

Models:

 public class MjoinImageTovar
    {
        public class interImage
        {
            public int id { get; set; }
            public int idTovar { get; set; }
            public int idImage { get; set; }

        }
        public class image
        {
            public int id { get; set; }
            public string fileName { get; set; }
            public int fileSize { get; set; }
            public string webPath { get; set; }
            public string systemPath { get; set; }
        }
    }

public class ModelTovar
    {
        public class Tovar
        {
            public int id { get; set; }         
            public string Links { get; set; }
           
        }

Edited by Allan Formatting using markdown.

I'm trying to figure out if this is possible. When a user scrolls up or down the datatable the following is always visible at the head...

Dear all,

In Editor last version, in Editor/Validate.php, the functions minLen and maxLen use strlen instead of a multibyte version of strlen, thus if using UTF8 the letter with accents count for 2, and validation fails.

Regards,

Gilles Boussin

Hello,
If i were to add a rangle slider , how can i use the inbuilt sort function to make the slider sort the datatables?
Any help would be appreciated ^^

I have installed and successfully activated the plugin but it is not showing on the WP left hand side bar. I am using not as Localhost but live on internet if that makes sense..... not sure of the correct term as new to WP.

Any pointers appreciated.

Hello to forum,
Please, I have big trouble with colReorder with serverSide processing and use stateSave.
What is the problem?
If I made the initial load of dataTable by click to fetch Data button it looks OK, The sorting is OK, and the functions which change teh data in the field to anchor work fine and in console I see that it call only one saveState for save the state into DB. When I change the Column position for example id from 1st position to 3rd position after invoice number, it looks OK, but is call the stateSave two times.
But When I call the fetch Data by the button again, then the column name change position to basic position and the data stay on the new position, Unfortunately the function for change the data to anchor not change the right column, but the column by the column name, not by the column with right data. How it looks? The data with ID are in 3rd column, but the column name ID is on top of 1st column. even I see that loadState is called one time and saveState is called two times.
OK, So i try to push the button again and the name of column with ID changed the position to 2nd column and the data is still on 3rd. loadState called only one time, saveState called 2 times. When I click on the button fetchData the ID name of column move to 3rd column and function at this time run correctly and change the data to anchor. The loadState called only one time, saveState called two times again.
Please, can you help me with this? I can to find what I do bad.
Shall I run the script with debug script with write the resolution into DB?
Thanks a lot for help
Honza H

I have an UploadMany that doesn't appear to fire a callback thru AJAX when an item is "Deleted" (X clicked on the right):

            editor = new $.fn.dataTable.Editor(
                {
                    ajax: { 
                        data: 
                        function(d) {
                            d.DT_RowID = editor.ids();
                        },
                        type: "POST",
                        url: "/AudioClips/Edit"
                    },
                    idSrc: "id",
                    table: "#Table_be6112dc6271436db5230ee7143273b7",
                    fields: [
                        {
                            name: "name",
                            label: "Name"
                        },
                        {
                            name: "clips",
                            label: "Audio Clip",
                            type: "uploadMany",
                            noFileText: "No Clips Uploaded.",
                            display: function (file)
                            {
                                if(file.fullyQualifiedID)
                                    return '<audio controls src="/AudioClips/Clip/?source=' + file.fullyQualifiedID + '" />';
                                else
                                    return '<audio controls src="/AudioClips/Clip/?source=' + editor.ids() + '_' + file + '" />';
                            }
                        }
                    ]
            } );

            $('#Table_be6112dc6271436db5230ee7143273b7').on('click', 'tbody td.dt-editable', function (e)
            {
                editor.inline(this);
            } );

    var dataTable = $("#Table_be6112dc6271436db5230ee7143273b7").DataTable(
        {
            processing: true,
            serverSide: true,
            filter: true,
            order: [0, 'asc'],
            orderMulti: false,
            ajax: {
                url: "/AudioClips/Items?id=2dac5d78-3373-47cf-815a-4cd8e9b78c3e",
                type: "POST",
                datatype: "json"
            },
            columns: [
                {
                    className: "dt-editable",
                    data: "name",
                    name: "Name",
                    autoWidth: true
                },
                {
                    className: "dt-editable",
                    data: "clips",
                    name: "Audio Clip",
                    render: function (d)
                    {
                        if (d.length)
                        {
                            return "<button class=\"btn btn-sm btn-outline-secondary dt-editable\">" + d.length + " Clips</button>";
                        }

                        return  "No Clips Uploaded.";
                    },
                    autoWidth: true,
                },
                {
                    data: "hasChildren",
                    name: "Is Variable?",
                    autoWidth: true
                },
                {
                    data: "id",
                    orderable: false,
                    render: function (data, type, row, meta)
                    {
                        return '<button class=\"btn btn-sm btn-outline-success Table_be6112dc6271436db5230ee7143273b7-details\">Details</Button>&nbsp;<button class="btn btn-sm btn-outline-danger" onclick="DeleteAudioClip(\''+data+'\');">Delete</button>';
                    }
                }]
        });

I'm getting not JS errors in Chrome and the break-point for the ajax() call in the editor itself is not being hit. I was curious if it was, perhaps, an issue with losing focus (I know that sometimes things don't update until focus is lost), but the break-point is still never hit and the server doesn't seem to get any calls either (from verbose logging).

It's fine if I need to tie into a custom parameter or something -- I just need to know what's up.

@kthorngren,

In his ajax data option example:
http://live.datatables.net/hopepicu/1/edit

Does this example work for both client and server-side?
How is url: "/ajax/arrays.txt" getting the information? Is this snippet tied to a backend somewhere or a separate http: site?

I see if you comment it out and press refresh the table only shows the data (John Smith).
Anyway, I am trying to make my webpage use ajax.reload() but have NO idea where to store a link as a .text file. Webhost won't let me save anything as .text.

Sample project link if needed: https://datatables-ajax.000webhostapp.com/

I would like for newly created rows to be automatically selected. I've tried the following code:

editor.on('postCreate', function (e, json, data, id) {
            table.row('#' + id).select();
        });

It looks like the data is already in the table at that point, but I can't query out the row yet. Is there another event that I could attach this to?

I have 12 datatables:

    <table id = "TABLE_1" class = "table table-striped"> 
    <table id = "TABLE_2" class = "table table-striped">

I need to display datatables with export and visibility buttons.
This is the datatables-init.js file

    $(document).ready(function() {
        var table = $("table[id^='TABLE']").DataTable( {
    
            buttons: ['copy', 'excel', 'pdf', 'colvis']
        });
        table.buttons().container()
            .appendTo(table.DataTable()('.col-md-6:eq(0)'));
    } );

The buttons do not display, I know that this is a problem with the place where they are displayed. Can anyone help ?

I'm using Row details to display extra information for each item in my table.

I see from the source row I can use row.child() to get a reference to the details panel (if it exists) for a given row.

Is there a way to go backwards? If I have a reference for the details can I get the parent?

Hello,

I have an problem, I have some amount in blue and bold on html table but on Print Preview option is not showing the same as the html.

Is a way to do the same as html?

thanks in advance.

Hi guys, i am having a problem with my datatable on server side ajax source.

I can retrieve correctly my data from server and display it's on datatable, but when I clicked any page number always I get an autoincrement number page.

Any ideas?, how can I get current page selected?

Thanks very much.

"columns": [{
"data": "seriel"
}, {
"data": "sa_id"
}, {
"data": "open"
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="User.jsp?date1=' + date1 + '&&date2='+ date2 +'&&status='+ 'Open' +'&&sa_id='+ ..... +'">' + data + '</a>';
}

                    return data;
                 }
             }
        ]

  if (e.keyCode == 40){ //arrow down
              
             table.$('tr.selected').removeClass('selected');
            tr.next().addClass('selected');
            tr = table.$('tr.selected');
              
            }
            if (e.keyCode == 38){ //arrow up
              
             table.$('tr.selected').removeClass('selected');
               tr.prev().addClass('selected');
               tr = table.$('tr.selected');
            
            }
            data = table.row('tr.selected').data();