Hi Igor, You can solve this in three ways:
1. Return a JSON object from Django as a string using dumps<http://docs.python.org/2/library/json.html#json.dumps>: This will keep your HTML file unchanged. The JSON file might not be exactly in the form you want. But if you know javascript then you can format it correctly into your table. 2. Use Django templates: You don't seem to use AJAX so why take the trouble of using Javascript to built the table? Let Django templates create it for you! (Search for the <table> example here http://www.djangobook.com/en/2.0/chapter04.html ) 3. Try the django-jqgrid app (https://github.com/gerry/django-jqgrid). I haven't used it but looks like a working solution. I would recommend the second option. Regards, Arun On Friday, January 10, 2014 2:30:20 PM UTC+5:30, Igor Korot wrote: > > Hi, ALL, > I have a little problem. > I'm trying to connect the Django based application with jQuery/jQWidgets > (specifically jqxGrid). > > Here's what I've done: > > This is my views.py file: > > [code] > def displayusbtable(request): > usb_list = USB.objects.all() > return render_to_response('html/index.html', {"usb_data": usb_list} ) > [/code] > > This is my html/index.html file: > > [code] > <!DOCTYPE html> > <html> > <head> > <title>Test</title> > {% load staticfiles %} > <link rel="stylesheet" href="{% static > "jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" %}" type="text/css" /> > <script type="text/javascript" src="{% static "jquery-1.10.2.js" > %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxcore.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxdata.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js" %}"></script> > <script type="text/javascript" src="{% static > "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js" %}"></script> > <script type="text/javascript"> > var data = "{{usb_data}}"; > $(document).ready(function(){ > var source = > { > localdata: data, > datatype: "array", > datafields: > [ > { name: 'device_name', type: 'string' }, > { name: 'vid_pid', type: 'string' }, > { name: 'install', type: 'string' }, > { name: 'disk_device', type: 'string' }, > { name: 'volume_device', type: 'string' }, > { name: 'usb_type', type: 'string' }, > { name: 'vid', type: 'string' }, > { name: 'pid', type: 'string' }, > { name: 'hub', type: 'number' } > ] > }; > var dataAdapter = new $.jqx.dataAdapter(source) > //initialize jqxGrid > $("#grid").jqxGrid( > { > source: dataAdapter, > showstatusbar: true, > editable: false, > columns: > [ > { text: 'Device Name', columntype: 'textbox', datafield: > 'device_name', width: 100 }, > { text: 'VID/PID', columntype: 'textbox', datafield: > 'vid_pid', width: 50 }, > { text: 'Install', columntype: 'textbox', datafield: > 'install', width: 50 }, > { text: 'Disk Device', columntype: 'textbox', datafield: > 'disk_device', width: 50 }, > { text: 'Volume Device', columntype: 'textbox', datafield: > 'volume_device', width: 50 }, > { text: 'Type', columntype: 'textbox', datafield: > 'usb_type', width: 100 }, > { text: 'VID', columntype: 'textbox', datafield: 'vid', > width: 100 }, > { text: 'PID', columntype: 'textbox', datafield: 'pid', > width: 100 }, > { text: 'Hub', datafield: 'hub', cellsalign: 'right', > cellsformat: 'n2' } > ] > caption: "Test" > }); > }); > </script> > </head> > <body> > <div id='jqxWidget'> > <div id="grid"></div> > </div> > </body> > </html> > [/code] > > Everything looks good, except that the page comes up blank. > Looking at the "View/Source" I see this: > > [code] > <!DOCTYPE html> > <html> > <head> > <title>Test</title> > > <link rel="stylesheet" > href="/static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" > type="text/css" /> > <script type="text/javascript" src="/static/jquery-1.10.2.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js"></script> > <script type="text/javascript" > src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js"></script> > <script type="text/javascript"> > var data = "[<USB: pk: 1, device_name: wd ses_device, vid_pid: > None, install: None, disk_device: None, volume_device: None, USB_type: > other, PID: #0748, Vendor: wd, Product: ses_device, Revision: #1019>, > <USB: pk: 2, device_name: wd ses_device, vid_pid: None, install: None, > disk_device: None, volume_device: None, USB_type: other, PID: #0748, > Vendor: wd, Product: ses_device, Revision: #1019>, <...(remaining > elements truncated)...']"; > $(document).ready(function(){ > var source = > { > localdata: data, > datatype: "array", > datafields: > [ > { name: 'device_name', type: 'string' }, > { name: 'vid_pid', type: 'string' }, > { name: 'install', type: 'string' }, > { name: 'disk_device', type: 'string' }, > { name: 'volume_device', type: 'string' }, > { name: 'usb_type', type: 'string' }, > { name: 'vid', type: 'string' }, > { name: 'pid', type: 'string' }, > { name: 'hub', type: 'number' } > ] > }; > var dataAdapter = new $.jqx.dataAdapter(source) > //initialize jqxGrid > $("#grid").jqxGrid( > { > source: dataAdapter, > showstatusbar: true, > editable: false, > columns: > [ > { text: 'Device Name', columntype: 'textbox', datafield: > 'device_name', width: 100 }, > { text: 'VID/PID', columntype: 'textbox', datafield: > 'vid_pid', width: 50 }, > { text: 'Install', columntype: 'textbox', datafield: > 'install', width: 50 }, > { text: 'Disk Device', columntype: 'textbox', datafield: > 'disk_device', width: 50 }, > { text: 'Volume Device', columntype: 'textbox', datafield: > 'volume_device', width: 50 }, > { text: 'Type', columntype: 'textbox', datafield: > 'usb_type', width: 100 }, > { text: 'VID', columntype: 'textbox', datafield: 'vid', > width: 100 }, > { text: 'PID', columntype: 'textbox', datafield: 'pid', > width: 100 }, > { text: 'Hub', datafield: 'hub', cellsalign: 'right', > cellsformat: 'n2' } > ] > caption: "Test" > }); > }); > </script> > </head> > <body> > <div id='jqxWidget'> > <div id="grid"></div> > </div> > </body> > </html> > [/code] > What I think I am missing is a mapping between the Python/Django > dictionary and the JavaScript/jqxGrid control. > > Can someone please take a look? > > Thank you. > > -- You received this message because you are subscribed to the Google Groups "Django users" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscr...@googlegroups.com. To post to this group, send email to django-users@googlegroups.com. Visit this group at http://groups.google.com/group/django-users. To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/f345e058-f2e8-4b8e-9d26-ad51b21b8a14%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
