jQWidgets Forums

This topic contains 2 replies, has 1 voice, and was last updated by mdmings517 10 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Table not loading data Posts
January 30, 2015 at 3:44 am Table not loading data #66194

mdmings517
Participant

Hello Community

I hate when I can’t figure out what the problem is but for some reason I can’t get the dataTable portion of this code to work. I don’t know what I am doing wrong. The problem is in the function displayTable. HELP!
========================================================================================================================================================

<?php
require_once(‘folderViewHeader.php’);
?>

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Splitter, Splitter Widget, Splitter, jqxSplitter” />
<meta name=”description” content=”This page demonstrates splitter’s events” />
<title id=’Description’>Files\Folders</title>
<link rel=”stylesheet” href=”../JQuery/jqwidgets/styles/jqx.base.css” type=”text/css” />
<style type=”text/css”>
html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script type=”text/javascript” src=”../JQuery/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../JQuery/scripts/demos.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxnavigationbar.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../JQuery/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript”>

$(document).ready(function () {
$(‘#splitter1’).jqxSplitter({ width: ‘100%’, height: ‘100%’, splitBarSize: -1, resizable: false, panels: [{ size: 190, min: 190, collapsible: false}] });
$(‘#splitter2’).jqxSplitter({ width: ‘100%’, height: ‘100%’, splitBarSize: 5, resizable: false, panels: [{ size: ‘100%’ , min: 350, collapsible: false}, { size: 350, min:350, collapsible: true}] });
$(‘#splitter3’).jqxSplitter({ width: ‘100%’, height: ‘100%’, splitBarSize: -1, resizable: false, orientation: ‘horizontal’, panels: [{ size: ‘90%’ , min: 190, collapsible: false}, { size: 55, min:55, collapsible: false}] });
// Create jqxTree
$.ajax({
url: ‘json_directories.php’,
success: function (data) {
var source =
{
datatype: ‘json’,
datafields: [{name: ‘dir_id’ },{name: ‘parent_id’ },{name: ‘name’}],
id: ‘dir_id’,
localdata: data
};
// create data adapter
var dataAdapter = new $.jqx.dataAdapter(source);
//perform Data Binding
dataAdapter.dataBind();
// get the tree items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
// the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
// specifies the mapping between the ‘text’ and ‘label’ fields.
var records = dataAdapter.getRecordsHierarchy(‘dir_id’, ‘parent_id’, ‘items’, [{ name: ‘name’, map: ‘label’},{name: ‘dir_id’, map: ‘id’}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘190px’});
$(‘#jqxWidget’).on(‘select’, function (event) {
//$(“#ContentPanel”).html(“<div style=’margin: 10px;’>” + event.args.element.id + “</div>”);
displayTable(event.args.element.id);
});
},
error: function () {
alert(‘The source is unavailable!’);
}
});

//
function displayTable($ID)
{
var url = ‘json_directory_contents.php?parent_id=’+$ID;

var tsource =
{
datatype: ‘json’,
datafields: [
{name: ‘type’, type: ‘string’},
{name: ‘id’, type: ‘int’},
{name: ‘name’, type: ‘string’},
{name: ‘size’, type: ‘float’},
{name: ‘owner’, type: ‘string’},
{name: ‘modified’, type: ‘string’}
],
id: ‘id’,
url: url
};

alert(tsource);

var tDataAdapter = new $.jqx.dataAdapter(tsource);

$(‘#dataTable’).jqxDataTable(
{
width: 850,
pageable: true,
pageButtonsCount: 10,
source: tDataAdapter,
columnsResize: true,
columns: [
{ text: ‘Type’, dataField: ‘type’, width: 100 },
{ text: ‘ID’, dataField: ‘id’, width: 100 },
{ text: ‘Name’, dataField: ‘name’, width: 100 },
{ text: ‘Size’, dataField: ‘size’, width: 50 },
{ text: ‘Owner’, dataField: ‘owner’, width: 100 },
{ text: ‘Modified’, dataField: ‘modified’, width: 100 }
]
});

$(“#ContentPanel”).html(“<div style=’margin: 10px;’>” + $ID + “</div>”);
}

});

</script>
</head>
<body class=’default’>
<div style=”width:100%; min-width:1024px; height:55px; border:1px solid black;”></div>
<div id=”splitter1″>
<div>
<div id=”splitter3″>
<div>
<div style=”height:55px;”>Header</div>
<div>
<div id=”jqxWidget”></div>
</div>
</div>
<div>
<div id=”strgInfo” style=”font-family:Arial; font-size:x-small; height:55px; text-align:center;”><p>Storage used (100%)<br>Buy more storage</p></div>
</div>
</div><!–Splitter 3–>
</div>
<div>
<div id=”splitter2″>
<div id=”ContentPanel”><div id=”dataTable”></div></div>
<div>Details</div>
</div>
</div>
</div><!–Splitter 1–>
</body>
</html>

January 30, 2015 at 4:12 am Table not loading data #66195

mdmings517
Participant

The problem is somewhere in the setting of the parameters for the DataTable

January 30, 2015 at 4:49 am Table not loading data #66197

mdmings517
Participant

I figured it out. Misspelled!
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.