Problem with jQuery Mobile Tables - Column Toggle Table
Hello users! I want create a web app for my homepage. But my knowledge status in javascript and jquery is just a little bit low. I can not find my syntax error or my thoughts are wrong. I will be glad if somebody can help me.
First of all, I send an array from my msql-database with PHP and JSON to the javascript. Just like this:
[{"eintrag_id":"2473","aktiv_datum":"2016-01-05"},{"eintrag_id":"2469","aktiv_datum":"2016-01-05"}]
When I startet the page all columns and rows will be loaded in the table.- That's fine.
In the next step I want hide the column "aktiv_datum" (Date) with the toogle button.
>>> Now, the problem: only the column-heading was hided. The columne-data source not.
see my picture:
When I refresh the browser with the browser button (refresh) or Function button (F5), the table is loaded again and all toggle function are works fine now.
Where is my error ????
My data source:
- <!DOCTYPE html>
- <html lang="de">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>testpage</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <a href="" data-icon="back">back</a>
- <h2>Overview</h2>
- </div>
- <div data-role="main" class="ui-content">
- <table data-role="table" id="myTable" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
- <thead>
- <tr class="ui-bar-d">
- <th data-priority="1">ID</th>
- <th data-priority="2">Date</th>
- </tr>
- </thead>
- <tbody>
- <script type="text/javascript">
- var url = 'db_haushaltsbuch_uebersicht.php';
- var tbody = $('#myTable tbody'),
- props = ["eintrag_id", "aktiv_datum"];
- $.getJSON(url, function(data) {
- $.each(data, function(index, data) {
- var tr = $('<tr>');
- $.each(props, function(index, prop) {
- $('<td>').html(data[prop]).appendTo(tr);
- });
- tbody.append(tr);
- });
- });
- </script>
- </tbody>
- </table>
- </div>
- <div data-role="footer">
- test page
- </div>
- </div>
- </body>
- </html
Many thanks for your help!