Table load data programmatically

Get help with using Metro 4 components
Post Reply
bambirra
Posts: 7
Joined: Mon Aug 13, 2018 6:20 pm
Status: Offline

Table load data programmatically

Post by bambirra » Mon Aug 13, 2018 9:00 pm

Hi,

I'm using the Table component, and when I load the data programmatically I haven't succeeded.

I instantiate my table like this:

Code: Select all

<table id =" demo-table "
            class = "table-border striped row-hover mt-4 entities-table" style = "min-width: 300px! important;"
            data-role = "table"
            data-cls-table-top = "row"
            data-cls-search = "cell-md-8"
            data-cls-rows-count = "cell-md-4"
            data-table-search-title = "SEARCH:"
            data-table-rows-count-title = "SHOW:"
            data-table-info-title = "SHOWING $ 1 TO $ 2 OF THE TOTAL $ 3 EMPLOYEES"
            data-all-records-title = "ALL RECORDS"
            data-rows = "10"
            data-rows-steps = "- 1, 10, 20, 50, 100"
            data-info-wrapper = "# table-info"
            data-pagination-wrapper = "# pagination"
            data-rows-wrapper = "# rows-count"
            data-search-wrapper = "# table-search"
            data-inspector-title = "DISPLAY SETTINGS"
            data-on-draw-cell = "tableFuncs.onDrawCell"
            data-on-draw-row = "tableFuncs.onDrawRow"
            data-view-save-mode = "client"
        > </ table> 
And I load the data in this function:

Code: Select all

$ (" body ") .on (" click "," # btnLoad ", function (e) {
		e.preventDefault ();
                var source = 'employees / listall';
                $ ('# mytable') .data ('table'). loadData (source);
}); 
The return from the source is a JSON object and the data comes to be loaded from the server, but isn't displayed in the table. When I put the data-source = 'employees / listall' at the table instantiation it works, but I need the data to be loaded by the function, because it will define how the server will search.

User avatar
olton
Site Admin
Posts: 121
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Mon Aug 13, 2018 9:06 pm

Create screenshot your browser with open developer console

bambirra
Posts: 7
Joined: Mon Aug 13, 2018 6:20 pm
Status: Offline

Post by bambirra » Mon Aug 13, 2018 9:19 pm

Hi,
follow as pictures.

here showing the error that appears on the console.
Image


and here showing that the data is loaded.
Image

Thanks.

User avatar
olton
Site Admin
Posts: 121
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Mon Aug 13, 2018 9:20 pm

Update Metro 4 to latest

bambirra
Posts: 7
Joined: Mon Aug 13, 2018 6:20 pm
Status: Offline

Post by bambirra » Mon Aug 13, 2018 9:41 pm

I updated, but the error continues.

Here is the error in the console.
Image

Image
Here showing that the data is loaded.


Image
and here showing that it works when data-source is instantiated in the table.

User avatar
olton
Site Admin
Posts: 121
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Mon Aug 13, 2018 9:52 pm

1) Your server must return data as text/json, not a string (fro string I fix it in 4.2.19)
2) And code for button

Code: Select all

$(".button").on(Metro.events.click, function(){
  var dataSource = "https://raw.githubusercontent.com/olton/Metro-UI-CSS/master/docs/test/table.json";
  var table = $("#t2").data("table");

  table.loadData(dataSource, true);
});

User avatar
olton
Site Admin
Posts: 121
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Mon Aug 13, 2018 10:00 pm


bambirra
Posts: 7
Joined: Mon Aug 13, 2018 6:20 pm
Status: Offline

Post by bambirra » Mon Aug 13, 2018 11:51 pm

Thanks for your help.

I inserted your code into the function of the button and it worked (without applying the update to version 4.2.19). My mistake was in the second parameter of the loadData function, I didn't inserted anything, in fact, I should have defined it as true.

Post Reply