¿Cómo actualizar la lista de tablas de datos jquery?

I am using DataTable Jquery for bind list of records. I face below issue.

I am using jquery model popup for addnew and update record in MVC 4.0 Razor with no submit button only using ajax function. When I am click on "save" button and I want to update list with latest changes, but it can not. My code as below.

For Index page for list bind.

<script type="text/javascript">

        $(document).ready(function () {

            if (fnServerObjectToArray) {
                var oTable = $('.datatable').dataTable({
                    "bJQueryUI": true,
                    "sScrollX": "",
                    "bSortClasses": false,
                    "aaSorting": [[0, 'asc']],
                    "bAutoWidth": true,
                    "bInfo": true,
                    "sScrollY": "100%",
                    "sScrollX": "100%",
                    "bScrollCollapse": true,
                    "sPaginationType": "full_numbers",
                    "bRetrieve": true,
                    "bProcessing": true,
                    "sAjaxSource": $('.datatable').attr('data'),
                    "aoColumns": [
                                  { sType: 'string' },
                                  { sType: 'string' },
                                  { sType: 'string' },
                                  { sType: 'string' },
                                  { bSortable: false }
                    ],
                    "fnServerData": fnServerObjectToArray()
                });
            }
        });

        fnServerObjectToArray = function () {
            return function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": function (json) {
                        var a = [];
                        for (var i = 0, iLen = json.aaData.length; i < iLen; i++) {
                            var inner = [];

                            inner.push(json.aaData[i].Name);
                            inner.push(json.aaData[i].Price);
                            inner.push(json.aaData[i].Phone);
                            inner.push(json.aaData[i].Email);
                            inner.push("<a title='Edit Place' class='EditDialogPlacesToStay' href='/placetostay/" + json.aaData[i].Id + "/edit'><img src='/Content/images/icons/small/grey/pencil.png' title='Edit' /></a> <a class='DeleteConfirm' href='/placetostay/" + json.aaData[i].ID + "/delete'><img src='/Content/images/icons/small/grey/trashcan.png' title='Delete' /></a>");
                            a.push(inner);
                        }
                        json.aaData = a;
                        fnCallback(json);
                    },
                    "error": function (error) {
                    }
                });

            }
        }
    </script>

On save button in success function I call the location.reload().

But I could not bind the latest changes of records means List is not refreshed.

Please help me for same.

preguntado el 28 de mayo de 14 a las 11:05

2 Respuestas

Wrap the datatable initialization into a function, like initDataTable(), and add the option bDestroy to the settings :

function initDataTable() {
   if (fnServerObjectToArray) {
      var oTable = $('.datatable').dataTable({
         "bDestroy" : true, //<-- add this option
         "bJQueryUI" : true,
         ...
         //anything as above
      });
   }
}

$(document).ready(function () {
  initDataTable();
});

when you want to refresh / reload, like by a click on a button :

<button id="refresh">Refresh</button>
$("#refresh").click(function() {
   initDataTable();
});

here is a demo -> http://jsfiddle.net/cxe5L/


To avoid the cache-issue
jQuery dataTables has hardcoded cache : true into its AJAX-calls. You have "sAjaxSource": $('.datatable').attr('data'). Asumo data holds the path to an external resource, like /data/getdata.asp or similar? Add a timestamp as param to that resource, like

sAjaxSource : $('.datatable').attr('data')+'?param='+new Date().getTime()

so the sAjaxSource becomes on the form

/data/getdata.asp?param=1401278688565 

This is basically the same thing jQuery is doing, when cache : false is set on a AJAX-request.

contestado el 28 de mayo de 14 a las 13:05

i change as per your instruction but still my data is not refresh. - Himanshu N Tatariya

@user2431251, oh yes. This is most likely due to the fact that jQuery datatables has hardcoded "cache : true" into its AJAX-calls. You can see that by yourself by inspecting the code. See edited answer how to avoid this. - Davidkonrad

location.reload() will refresh the page content and your

 $(document).ready(function () {}

is executing again instead of getting the latest changes. Check weather your database has new records or not.

contestado el 28 de mayo de 14 a las 12:05

Yes my database taking new records. - Himanshu N Tatariya

Is your callback is correctly falling back??? Please make some fiddle or some generic. Then i will write the script for you.. - jithil

Think reloading the entire page is a little bit overkill :) - Davidkonrad

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.