Hey guys, i need a bit of help getting my server-side-processing code working. Ill start out by saying im new to DataTables, as well as the programming field in general so please pardon me if my questions are REALLY dumb :) So my current task at work is making a web interface to view/edit data from our server. Its a MS SQL server and they are having me use DataTables for the web end. So far ive gotten it so that it reads and displays correctly. Right now I am trying to implement it so that it sends back the add/delete/edit commands correctly but after a couple weeks of working on it and reading on here, have had 0 luck. Here is my current code:
Now based on everything I've read and had told to me, i need to put in
Anyone with any clues on what i could try?
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ page session="false" %> <jsp:include page="header.jsp" /> <link rel="stylesheet" type="text/css" href="content/css/jquery.dataTables.css" /> <link rel="stylesheet" type="text/css" href="content/css/dataTables.tabletools.css" /> <link rel="stylesheet" type="text/css" href="content/css/dataTables.editor.css" /> <script type="text/javascript" src="content/js/jquery.min.js"></script> <script type="text/javascript" src="content/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="content/js/dataTables.tabletools.min.js"></script> <script type="text/javascript" src="content/js/dataTables.editor.min.js"></script> <script> $(document).ready(function() { $('#demo').html( '<table class="display" id="example"></table>' ); var editor = new $.fn.dataTable.Editor( { "ajaxUrl": "dataTable/edit", "domTable": "#example", "fields": [ {"label": "ID:","name": "id"}, {"label": "Version:", "name": "version" }, {"label": "Name:", "name": "name" }, {"label": "Application Name:", "name": "applicationName" }, {"label": "Application Version:", "name": "applicationVersion" }, {"label": "Availability:", "name": "availability" }, {"label": "Baseline Load:", "name": "baselineLoad" }, {"label": "Color", "name": "color"}, {"label": "Implementation ID", "name": "implementationId"}, {"label": "Quantity", "name": "quantity"}, {"label": "Label", "name": "label"}, {"label": "Location", "name": "location"}, {"label": "Application Owner", "name": "applicationOwner"}, {"label": "Architecture Owner", "name": "architectureOwner"}, {"label": "Data Owner", "name": "dataOwner"}, {"label": "Is Ola Agreed?", "name": "isOlaAgreed"}, {"label": "Is Recognized", "name": "isRecognized"}, {"label": "Is Strategic", "name": "isStrategic"}, {"label": "Resolved Time UTC", "name": "resolvedTimeUtc"} ] } ); $('#example').dataTable( { "bJQueryUI": true, "sPaginationType": "full_numbers", "iDisplayLength": 5, "sDom": 'T<"H"fl>t<"F"ip>', "sAjaxSource": 'dataTable/getData', "aoColumns": [ { "mData": "id", "sTitle": "ID" }, { "mData": "version", "sTitle":"Version" }, { "mData": "name", "sTitle": "Name" }, { "mData": "applicationName", "sTitle": "Application Name" }, { "mData": "applicationVersion", "sTitle": "Application Version" }, { "mData": "availability", "sTitle": "Avaliblity" }, { "mData": "baselineLoad", "sTitle": "Baseline Load"}, { "mData": "color", "sTitle": "Color"}, { "mData": "implementationId", "sTitle": "Implementation ID"}, { "mData": "quantity", "sTitle": "Quantity" }, { "mData": "label", "sTitle": "Label" }, { "mData": "location", "sTitle": "Location" }, { "mData": "applicationOwner", "sTitle": "Application Owner" }, { "mData": "architectureOwner", "sTitle": "Architecture Owner" }, { "mData": "dataOwner", "sTitle": "Data Owner" }, { "mData": "olaAgreed", "sTitle": "Is OLA Agreed" }, { "mData": "recognized", "sTitle": "Is Recognized?" }, { "mData": "strategic", "sTitle": "Is Strategic?" }, { "mData": "resolvedTimeUTC", "sTitle": "Resolved Time UTC" }, ], "oTableTools": { "sRowSelect": "multi", "aButtons": [ { "sExtends": "editor_create", "editor": editor }, { "sExtends": "editor_edit", "editor": editor }, { "sExtends": "editor_remove", "editor": editor } ] } } ); }); </script> <table> <tr> <td><div id="sidebar"><jsp:include page="sidebar.jsp"/></div> </td> <td><div id="demo"></div> </td> </tr> </table> <jsp:include page="footer.jsp" />
Now based on everything I've read and had told to me, i need to put in
bServerSide: true, sServerMethod: 'POST'problem right now is how my work had me set this up i use
"sAjaxSource": 'dataTable/getData',not a PHP file. According to the examples on here (http://datatables.net/examples/data_sources/server_side.html) I need to use a PHP file. Now first off i cant quite tell if the section of PHP posted in the example is supposed to be the entire code, or just added to a pre-existing Server_processing.php file. Now either way.....im not sure how to combine having to use a PHP with our /getData method.....
Anyone with any clues on what i could try?