Can i load DataTable as function ?

headshot9x · April 2015

Hello guys, as title feature , i don`t know i can load DataTable as a function, i can use this function anywhere,anytime,i.e event onload ,etc... .See at below

  $(document).ready(function () {
var table;
 function load_table() {
  table = $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/LIST_LOCATION",
                    dataSrc: function (json) {
                        return $.parseJSON(json.d);
                    },
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                }
            });          
}
onload = function () {
    load_table();
            }
});

I try it and it not work. Ok, please give me some your advice.
Thank you.

headshot9x · April 2015

This problem in here : when i update data in Datatable, I refresh it, I can not see it.

headshot9x · April 2015

The problem is that I want to refresh datatable. After changing the data in the database, I hit the refresh button, DataTable will load and display the new data.

 $(document).ready(function () {
var table; 
function load_table() {
table = $('#div_table').DataTable({                
"processing": false,                
"serverSide": false,                
"ajax": {                    
"url": "../BUS/WebService.asmx/LIST_LOCATION",                    
dataSrc: function (json) {                        
return $.parseJSON(json.d);                    
},                    
"dataType": "json",                    
"contentType": "application/json; charset=utf-8",                    
"type": "POST"                
}            
});          
}
onload = function () {    
load_table();            
}
 $('#bt_refresh').click(function (e) {
                e.preventDefault();
    load_table(); 
                //table.search('');
                //table.draw();
                //$('#div_table').DataTable().ajax.reload();
});
});

Thank for your view and some idea about problem.

headshot9x · April 2015

Anybody have idea, share with me . Thank you .

allan · April 2015

Please link to a test case, showing the issue, as per the forum rules.

Allan

headshot9x · April 2015

Dear allan . This is test case http://live.datatables.net/yayepogu/1/ and debuger datatable http://debug.datatables.net/izucer
As i say , I want load Datatable as a function . I can load data in DataTable , it is working . Now i want put load DataTable as a function , then when i click button Refresh , the data in DataTable will update from ajax.
Example : when i edit data in Server , if i click button Refresh , it will load data new update in DataTable .

headshot9x · April 2015

Dear allan .
As it means I want to update the latest data from the Server to the DataTable after pressing the Refresh button.
Thank sir.

wjhumphreys · April 2015

// In main page and assuming jquery loaded

$(document).ready(function () {
  myTableStuff.init();
});

// Better in separate file

var myTableStuff = (function ($, w, undefined) {

  // Private variables and functions

  var _table; 

  function createMyTable() {
    _table = $('#div_table').DataTable({  WHATEVER  });         
  }

  function initEvents() {

    $("#bt_refresh").click(function (e) {
       e.preventDefault();  
       _table.ajax.reload();  // You may want to test for null table first
     });

  }

  var init = function () {
    initEvents();
    createMyTable();
  }

  // Reveal public pointers to private functions and properties

  return {
    init: init
  };

})(jQuery, window);

Ive typed this out of my head so I haven't tested it for syntax errors

headshot9x · April 2015

Dear all.
Maybe there is a misunderstanding here. I simply want to load the DataTable using a function, and call it again to see the latest data from the server. Note: "Simply refresh the data from Server DataTable using the Refresh button." As I said I can load data to DataTable in a normal way, now I want to put it into a function, to be able to call it.

<script type="text/javascript" charset="utf-8">
        var table;
        function load_table()
        {
            table=$('#div_table').DataTable({ WHATEVER });
        }
        window.onload = function()
        {
            load_table();
        }       
        $(document).ready(function () 
        {  
            //load_table();
        }); 
        $("#bt_refresh").click(function (e) 
        {       
            e.preventDefault();
            load_table();
        }); 
</script>

When i use code above, i get error

DataTables warning : table id=div_table - Cannot reinitialise DataTable.For more infor please see.....

By default, the DataTable is used like this https://datatables.net/

<script type="text/javascript" charset="utf-8">
            var table;
    $(document).ready(function()
    {    
        table=$('#myTable').DataTable({ WHATEVER});
    });
</script>

The problem I described very clearly, please read through it. I also had my debugger to see the data can be displayed on a DataTable in a normal way.http://debug.datatables.net/izucer
Inside , i reference this link http://datatables.net/manual/tech-notes/3 . I think shoud use destroy() and retrive(), but it still not working.
Thank you.

wjhumphreys · April 2015

Thats exactly what the code I have posted does.

allan · April 2015

Add the destroy option to @wjhumphreys's code. Simply destroy: true is all that is needed where you create the DataTable (i.e. the WHATEVER part).

Allan

headshot9x · April 2015

Dear all and allan .I think this failed. I try my code

 <script type="text/javascript" charset="utf-8">
       window.onload = function () {
        }
        $(document).ready(function () {
            mytablestuff.init();
        });
        var mytablestuff = (function ($, w, undefined) {
            var table;
            function load_table() {
                table = $('#div_table').DataTable({
                    destroy: true,
                    "processing": false,
                    "serverSide": false,
                    "ajax": {
                        "url": "../BUS/WebService.asmx/LIST_LOCATION",
                        "dataType": "json",
                        "contentType": "application/json; charset=utf-8",
                        "type": "POST",
                        dataSrc: function (json) {
                            return $.parseJSON(json.d);
                        }
                    },
                    "aoColumns": [
                        { "mData": null, "aTargets": [0], "sType": "integer", "bSearchable": false, "orderable": false },
                        { "mData": "LOCATION_NAME", "aTargets": [1], "sType": "string" },
                        { "mData": "LOCATION_DES", "aTargets": [2], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                        { "mData": "LOCATION_ID", "aTargets": [3], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                        { "mData": "AREA_ID", "aTargets": [4], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false },
                        { "mData": "EDIT_DATE", "aTargets": [5], "sType": "date", "bVisible": false, "bSearchable": false, "orderable": false },
                        { "mData": "EDIT_BY", "aTargets": [6], "sType": "string", "bVisible": false, "bSearchable": false, "orderable": false }
                    ],
                    "order": [[1, 'asc']],
                });
                table.columns([3, 4, 5, 6]).visible(false);
                table.on('order.dt search.dt', function () {
                    table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                        cell.innerHTML = i + 1;
                    });
                }).draw();
            }
            function inintEvents() {
                $('#bt_refresh').click(function (e) {
                    e.preventDefault();
                    table.ajax.reload();
                });
            }
            var init = function () {
                inintEvents();
                load_table();
            }
            return {
                init: init
            };
        })(jQuery, window);
  </script>

After try with code here , I edit data in Database , then i click refresh button , data in DataTable not update lasted data.Example : First load, row one have data : This is my row one . i will edit it in database "This is my row one1111111111111" . I click refresh button, data in DataTable not update lasted.
Thank you.

allan · April 2015

Can you give a link to the page please so it can be debugged directly. Scanning over the code it looks like it should work, although I don't understand why window.onload = function () {} is defined. That will remove the jQuery onload event listener.

Allan

wjhumphreys · April 2015

Also make sure that the data that is being sent and returned is correct for.

url": "../BUS/WebService.asmx/LIST_LOCATION"

Without using Datatables first.

headshot9x · April 2015

Dear allan , I test it in localhost, and i defined some functions another.
Dear wjhumphreys , data send completed .
Please see demo of me at https://www.youtube.com/watch?v=kl0oEOJthkY.
And you can view , then give me a advice well good.
Best & Regards.
headshot

allan · April 2015

Thank you for the video. Unfortunately without any code there is nothing that can help with since we don't know what is wrong. As I say, please link to a test case by hosting the page on a server we can access somewhere or using http://live.datatables.net toto at least show the code.

Allan

headshot9x · April 2015

Dear allan . Ok , i try use live.datatable test it , please see at http://live.datatables.net/ciwapopu/1/ . Thank you.
This is data ,(It is JSON string): http://4gp.tw/ba3c/1430190568662.txt or http://m.uploadedit.com/ba3c/1430191850399.txt

allan · April 2015

"url": "http://m.uploadedit.com/ba3c/1430190568662.txt",

It is reading from a static text file. Unless changing the database values causes that file to be updated, it will always just keep reading that same static information.

Allan

headshot9x · April 2015

On my machine, I use SQLServer to the test, I can find nowhere to update dynamic database. The main problem here is that "I want to use as a function load datatable", On youtube, you can see my demo displays data out, please think a little about it.,or you can create one database file small for this example.
Thank sir.

allan · April 2015

In that case you haven't shown me all the code that I asked for, which is why I've been unable to offer any help. I don't know what your code looks like. Using DataTables as a function should make little to no difference.

or you can create one database file small for this example.

Certainly - the priority support options would cover this.

Allan

Can i load DataTable as function ?

Can i load DataTable as function ?

Answers

Howdy, Stranger!

Categories

DataTables

Can i load DataTable as function ?

Can i load DataTable as function ?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables