I am using MongoDb as my database , laravel for server and angularjs 1.6 for fronted.

How to reload one row of DataTable instead of loading whole content of the DataTable.

I tired like this

setInterval( function () {
data_table.ajax.reload( null, data_table.rows({selected:true}).data()[0]._id );}, 30000 );

I am passing one Id in second argument in ajax.reload API.

I am expecting that the above code will call Laravel show($id) (In controller) method , the updated value of that Id I will fetch from MongoDb return to DataTable so that DataTable will update only that particular row.

I am not sure that my above approach is correct or not, so please help me to figure out How to update one row in DataTable.

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.

I have searched around for some tutorials and again I would be grateful for any links to help me understand DataTables as I can see from many examples it will be ideal for my purposes.

Thanks

Guys,

My table is declared as follow:

<div id="divTable" style="height: 600px; width: 53%; float: left">
  <table id="myTable" class="row-border hover order-column" style="width: 100%">
  </table>
</div>
```![](https://datatables.net/forums/uploads/editor/jb/myq1m8w8z1rw.png "")


The DataTable is being instantiated as follow:

```js
$('#myTable').DataTable({
                destroy: true,
                initComplete: function(settings, json) {
                    // do some stuff...
                },
                ajax: {
                    url: "/my_service"
                    dataSrc: function(data){
                        // do some stuff...
                       // data item is
                      // for example: data[0] = {
                                  field1: "aaaa",
                                  field2: "bbbb", 
                                  field3: "cccc",
                                  field4: "dddd"
                          }
                        return data;
                    }
                },
                columns: [
                    { data: 'field1' },
                    { data: 'field2' },
                    { data: 'field3' },
                    { data: 'field4' }
                ],
                order: [[ 1, 'asc' ]],
                scrollY:        400,
                deferRender: true,
                scroller: true,
                columnDefs: [
                    { targets: 1, type: 'diacritics-neutralise' }
                ],
                language: {
                    url: '/pt-BR.json'
                }
            });

But the column names aren't being displayed (please, find the image attached).

I've done according to the manual (https://datatables.net/manual/data/).

Thank you,

Guilherme

Why to Use Node.js,Pros and Cons of Choosing Node.js for Back-end Development

I started evaluating editor for a small requirement I have but I am not so sure it can be done without changing the underlying data structure

This example https://editor.datatables.net/examples/advanced/joinArray.html is closest to what I am looking for

User selects the row, clicks edit and can checkbox up to 3 options Email, SMS, Call
What is displayed however is based on the enabled field in the JSON

DataTables table is able to render the column correctly with simple { data: "notification.enabled" }
The editor however will not render the checkboxes with the editor fields initialization options below.

Any ideas if this is supported in datatables editor ?

            {
              label: "Notification:",
              name: "notification.options",
              type: "checkbox"
            },

//Data source

[
{
    "notification": {
        "enabled": ["Email"],
        "options": ["Email", "SMS", "Call"]
    },
    "_id": "5c2bab964d83ef7b06599621",
    "name": "Doyle Gerlach IV"

}, {
    "notification": {
        "enabled": ["Email"],
        "options": ["Email", "SMS", "Call"]
    },
    "_id": "5c2bab964d83ef7b06599620",
    "name": "Keagan Batz"
}
]

Hi,

I am using Datatables in an asp.net Project which uses c# and SQL DB. I have to display a huge amount of data, so I chose datatable instead of Gridview.In the application, I built, the user will inline edit some data in the table and that edited data will be stored in the DB. To achieve this I used jquery datatable editor and I am able to inline edit the rows but, couldn't able to retain the edited values. The controls are textboxes and dropdownlist in the datatable. can anyone help me with this?

below is my code

    var editor; // use a global for the submit and return data rendering in the examples
    $(document).ready(function () {

        editor = new $.fn.dataTable.Editor({
            ajax: "URL",
            table: "#example",
            idSrc: 'ID',
            fields: [{
                label: "Level,
                name: "Level",
                type: "select",
                options: [
                    { label: "No", value: 0 },
                    { label: "Yes", value: 1 }
                ],
            },  {
                label: "Title",
                name: "Title"
            }
            ]
        });

        // Activate an inline edit on click of a table cell
        $('#example').on('click', 'tbody td:not(:first-child)', function (e) {

            editor.inline(this, {
                onBlur: test
            });


        });
        BindTable();
    });
    function BindTable() {
        debugger;
        $.ajax({
            type: "POST",
            url: "URL",

            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: true,
            cache: false,
            beforeSend: function () {
                $("#divresponseLoading").addClass("loadingGif");

            },

            success: function (result) {
                var obj = $.parseJSON(result.d);
                $("#example").DataTable({
                    responsive: true,
                    destroy: true,
                    bAutoWidth: true,
                    "aaData": obj,
                    "lengthMenu": [[100, 250, 500], [100, 250, 500]],
                    "aoColumns": [

                        { "sTitle": "ID", "mData": "ID" },
                        { "sTitle": "Name", "mData": "name" },
                        { "sTitle": "Level", "mData": "LEVEL" },
                        { "sTitle": "Title", "mData": "Title" },

                  ],




                });

            },
            error: function (error) {

                AlertMessage("Unable to process data, please contact admin.");
            },
            complete: function () {

            }
        });
    } /* End of table binding */

    function test() {
        alert('Test');
        return true;
    }

Hi,

When exporting a datatable with 50k - 100k rows in it and when deferRender: true... the page becomes unresponsive across all browsers. There are many discussions regarding this issue, however I haven't seen a solution that would be best suited for the case of 50-100k rows. I am not using serverside.

Is there a way I can split the export into a new excel sheet to download every 10k rows using javascript?

I have the latest version of datatables.

Thanks,
CH

Are there any API to get colums widths afetr the datable has been rendered?

Hey, friends, I am using serverside datatbale in asp.net, when I click on button DataTable is bound , it is not showing according to screen size, but as I click on any of the sorting columns it just fits according to screen size

////////// array values///////////////////
$empid=array(600001,600011,600021,600031,);

->where(function ( $q ) use($empid) {
$q->where('ZIPCODE_MAILINGADDRESS', $empid, '=');
})

I have a SPA application where I have problems to export data from some of the datatables. It seems to me that if the datatables are contained in different containers or pages they will work but i can't quite figure it out. For example a page
with a table like this

<div vxa-role="page" vxa-page="employees" vxa-init-function="EmployeeService.LoadEmployees()" vxa-show-function="EmployeeService.LoadEmployees()" class="collapse">
            <div class="container-fluid">
                <br>Behöriga tjänstemän<br>
                <table id="editEmployeeTable" class="table table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Namn</th>
                            <th>TjänstemannaNr</th>
                            <th>AnvändarId</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

The export will work but not in a page like

<div class="tab-pane" id="car-tabber-herds" role="tabpanel">
                        <form id="editCarResponsibilityTableForm">
                            <div class="container-fluid">
                                <table id="editCarResponsibilityTable" class="table table-hover" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>SE-nummer</th>
                                            <th>Gårdsnamn</th>
                                            <th>Adress</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </form>
                    </div>

Both tables use an editor and are initiated with similar code like below

employeeTable = $('#editEmployeeTable').DataTable({
            'language': {
                'url': '/js/language/datatables_swe.json'
            },
            'dom': 'Bfrtip',
            'buttons': [
                {
                    extend: 'collection',
                    text: 'Exportera',
                    buttons: [
                        'excel',
                        'pdf'
                    ]
                },
                //,
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                {
                    extend: "remove",
                    editor: editor,
                    formMessage: function (e, dt) {
                        var rows = dt.rows(e.modifier()).data().pluck('name');
                        return 'Är du säker på att du vill radera ' +
                            'följande tjänsteman(män)? <ul><li>' + rows.join('</li><li>') + '</li></ul>';
                    }
                }
            ],
            'lengthChange': false,
            'order': [1, 'asc'],
            'select': {
                style: 'single'
            },
            'columns': [

I'd be grateful for any suggestions as this is a real showstopper

On re-loading a view - one would expect that the DataTableAjaxPostModel values will be re-initialized - but they are not. It retains the old values and irritatingly the public List<Order> order values are retained from the earlier view I played with and columns ordering i did there. Is there a way to clear this?

Hi Everyone.

I have a modal with a datatable, which I'm using to update bulk analysis information. The Modal and Table are shown below:

   <div class="modal fade" id="ASBresultsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h2>Asbestos Results</h2>
            </div>        
            <div class="modal-body">   
               <div class="Table_Container" >
                  <h2>Enter ASB Results</h2> 
                  <br>  
                  <table id="example" class="display" cellspacing="0" style="width:100%">
                     <thead>
                        <tr>
                           <th>Room Location</th>
                           <th >Area, Item, Material</th>
                           <th >Sample No</th>
                           <th>Identification</th>
                           <th>Rec. Actions</th>
                           <th>MAS</th>
                           <th>PAS</th>
                           <th>Total</th>
                           
                        </tr>
                     </thead>
                  </table>
               </div>
            </div><!--End Modal-Body-->
            <div class="modal-footer">
            Hello
            </div>
         </div> <!-- ENd Model Content -->                     
      </div><!--End Modal-Dialogue-->
   </div> <!-- End of modal fade bs-modal-sm -->

I've setup the data, class and width parts using the following - which works apart from with Width:

         var table = $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "../server_side/scripts/ET_ASBresultsForBuilding.php?buildingID=27291",
            iDisplayLength: 25,
            columns: [
               { data: "tblASBassets.roomLocation", className: 'editable', width:"20%"},
               { data: null, render: function ( data, type, row ) {
                      return data.tblASBassets.area + ', ' +data.tblASBassets.item + ', ' + data.tblASBassets.material;
                  } },
               { data: null, render: function ( data, type, row ) {
                      // Combine the first and last names into a single table field
                      return data.tblASBassets.approach + ' ' +data.tblASBassets.sampleNo;
                  } },
               { data: "tblASBassets.asbestosFound", className: 'editable', width:"20%" } ,
               { data: "tblASBassets.recommendedAction", className: 'editable', width:"20%" },
               { data: "tblASBassets.MAscore", width:"5%" },
               { data: "tblASBassets.PAscore", width:"5%" },
               { data: "tblASBassets.totalScore", width:"5%" } 

            ],          
            order: [ 1, 'asc' ],
            keys: {
               columns: ':not(:first-child)',
               keys: [ 9 ]
            },
            select: {
               style:    'os',
               selector: 'td:first-child'
            },
            buttons: [

            ]
         } );

I have a button on the screen to display the modal - which runs the following function to display it and try and redraw:

      function  showASBresultsModal() {
         $('#ASBresultsModal').modal('toggle') ;  
         var table = $('#example').DataTable();
         $('#container').css( 'display', 'block' );
         table.columns.adjust().draw();           
      }

When the modal opens the screen looks like:

when I resize the window the table sorts itself out:

I assume this is because it's on a modal... but not 100% sure.... has anyone got any ideas on what I can try to cure this?

Thanks in advance for any help given

I modified the range_dates.js plugin to parse and filter ISO 8601 dates (yyyy-mm-dd).

I have created a test case at:
http://live.datatables.net/nuxasuxa/2

To replicate the issue:
1. Select Start Date == 2018-12-01. Immediately all records are filtered out, but all 15 should display.
2. Select End Date == 2018-12-25. All records remain filtered out, but 8 records should display.
3. Tab back and forth through Search Record Name and End Date. 8 records will hide and display, but 8 records should display.
4. Repeat Steps 1 and 2, but type the date manually to experience the same issue.
5. Remove the datepicker initialization, and repeat Steps 1 and 2 to experience the same issue.

I've tried changing events between keyup, change, blur, focus, etc., but that had no effect.

How can I fix this UI issue?

Dear Allan!
I want to search data in datatables (not filter, or search), and select cell when I found data, and scroll to selcted cell.
Its woking when ajax not loaded new block from server.
Can You tell me what event run when data loaded, and can you test this problem?

You can test this:
log my test system, and type in Keresés cell qqqq and press right arrow on screen.
The select found qqqq in cell and will selkect, and scroll to cell.
Press right arrow key on screen again, the ajax runing and after process endig, the cell not select.
Press right arrow key on screen again, the ajax not runing and the founded cell selected.

You can test:
http://infoportal-hu.ddns.net:62080/index.php?module=TablePage&ID=25
You can login:
email:allandatatables@gmail.com
Jelszó:
AllanDatatables
If you logged in jump again http://infoportal-hu.ddns.net:62080/index.php?module=TablePage&ID=25

Thanks:
Gyula

hello,

I'm trying to insert a detail table in DataTables, but datatables alert me with this message, every time i reload the webpage

DataTables warning: table id=dataTables-smp - Requested unknown parameter '1' for row 3. For more information about this error, please see http://datatables.net/tn/4

and i don't think there's something wrong with the table result. the table still load the data completely.

oya, i also try to ignore the warning message using
$.fn.dataTable.ext.errMode = 'none';

but it not working properly in sorting, filtering, column visibility

Thanks

Hi, I'm trying to load data with Datatables 1.10.19 using defer loading feature with custom dataSrc, but I found that compat function (line 4105) is looking for "draw", "recordsTotal" and "recordsFiltered" in root data (json var), not in the root specified in dataSrc.
dataSrc is acting only as the location of object list (var data line 4109), not for the root of Datatables expected response parameters. Is this ok?
Is there another way to specify the location of "draw", "recordsTotal" and "recordsFiltered"?

Hello,
is possible use together multible datatables on same page with keytable extension?. I need to work keys on focused table. Thanks

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.