UNPKG

jqwidgets-framework

Version:

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

64 lines 2.42 kB
<!DOCTYPE html> <html lang="en"> <head> <title id="Description">Using jqxDataTable with JSP and MySQL.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { dataType: "json", dataFields: [{ name: 'FirstName', type: 'string' }, { name: 'LastName', type: 'string' }, { name: 'Title', type: 'string' }, { name: 'BirthDate', type: 'date' }], id: 'EmployeeID', url: 'jsp/select-data.jsp' }; var dataAdapter = new $.jqx.dataAdapter(source); $("#dataTable").jqxDataTable({ width: 550, source: dataAdapter, columns: [{ text: 'First Name', dataField: 'FirstName', width: 100 }, { text: 'Last Name', dataField: 'LastName', width: 100 }, { text: 'Title', dataField: 'Title', width: 180 }, { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', align: 'right', cellsAlign: 'right' }] }); }); </script> </head> <body class='default'> <div id="dataTable"></div> </body> </html>