Search

Hi, I'm trying to parse a REST service response as a Data table but I need to show only some columns in the table and to change columns name. Is any way to accomplish this goal with datatables API? Thanks in advance, Laura

Is it possible to stop the table from redrawing after an Inline edit is submitted?

Dearl All, I have been using your framework and I believe I've found a problem and also corrected it. For the C# frameworks upper than 3.5 all the json that is returned from a webmethod is encapsulated with a d for security reasons (http://stackoverflow.com/questions/6588589/why-do-asp-net-json-web-services-return-the-result-in-d?noredirect=1&lq=1#answer-6588603), which means that the json retrieved does not follow the base standart you have defines as you can see below: {d: "{"draw":5,"recordsTotal":464,"recordsFiltered":464, "data":…}"} Saying that when we are performing the UpdateDraw - function _fnAjaxUpdateDraw(settings, json) -, we should guarantee the following: if (json.hasOwnProperty("d")) json = JSON.parse(json.d); Without doing that, even if in the method _fnAjaxDataSrc(settings, json); we perform the parse and return the data from the above object we will never be able to correctly set the values related with recordsTotal and recordsFiltered, which means we will have our data actualized but a problem with the pagination itself. So the final method should be: function _fnAjaxUpdateDraw(settings, json) { // v1.10 uses camelCase variables, while 1.9 uses Hungarian notation. // Support both if (json.hasOwnProperty("d")) json = JSON.parse(json.d); var compat = function (old, modern) { return json[old] !== undefined ? json[old] : json[modern]; }; var data = _fnAjaxDataSrc(settings, json); var draw = compat('sEcho', 'draw'); var recordsTotal = compat('iTotalRecords', 'recordsTotal'); var recordsFiltered = compat('iTotalDisplayRecords', 'recordsFiltered'); if (draw) { // Protect against out of sequence returns if (draw * 1 < settings.iDraw) { return; } settings.iDraw = draw * 1; } _fnClearTable(settings); settings._iRecordsTotal = parseInt(recordsTotal, 10); settings._iRecordsDisplay = parseInt(recordsFiltered, 10); for (var i = 0, ien = data.length ; i < ien ; i++) { _fnAddData(settings, data[i]); } settings.aiDisplay = settings.aiDisplayMaster.slice(); settings.bAjaxDataGet = false; _fnDraw(settings); if (!settings._bInitComplete) { _fnInitComplete(settings, json); } settings.bAjaxDataGet = true; _fnProcessingDisplay(settings, false); } Do you agree with this solution? Do you think you can incorporate it in a future release? Best Regards

hi everyone So i'm using responsive.datatables library to manage my mysql-php data into it i have a rental car backend and i wan to manage my cars inside datatable (image_1) so when i do Add car or edit car it redirect me to another div which contain requested action after adding or editing when i make a return back to datatable cars list i lost responsive (image_2) and i cant recover it only if i refresh page or resizing navigator window ? any suggestions ?

Hey Guys, Please refer this screenshot. Everything looks like its working but pagination is having an issue. Sometimes when I go back & fro, screen gets freeze like in screenshot. Code looks just like examples snippets. Here is test url where I have setup demo. Also I see some discrepancy in records nos when I go next & prev. When I do next, it goes from 1,10 then 11,20 then 21,30 but when I click on prev when I am on 21,30 it comes back on 12,21.. Weird.. Also i think its not calling db as expected.. Please help me with it..

is it possible to fill a row cell with a

i m using codeigniter here i pass the values from form for example here i am passing date value to model and and get back the corresponding data record to view . please give me solution how can i post parameter ?

I've been pondering for the past day about the example Child rows (show extra / detailed information). Is it possible to use DataTables to use something like below for the Child Rows (see code snip below with table id of "dataTable" - yeah, bad name)? The sample is actual development data that is history of all, we would like the latest history to be displayed, then when the user click the "+", it would expand to show all the history. For example, this is the output currently: R 3WC9GGV Oct 15 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot R 3WC9GGV Oct 15 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot A 3WC9GGV Oct 19 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot R 3WC9HFW Oct 15 2015 FOX SWIPER Jul 02 2016 Jul 03 2016 SelectSpot R 3WC9HFW Oct 15 2015 FOX SWIPER Jul 02 2016 Jul 03 2016 SelectSpot R 3WC9HFW Oct 15 2015 FOX SWIPER Jul 02 2016 Jul 03 2016 SelectSpot I'd like this to display this way without expansion: + A 3WC9GGV Oct 19 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot + R 3WC9HFW Oct 15 2015 FOX SWIPER Jul 02 2016 Jul 03 2016 SelectSpot This is what it would be with expanded: - A 3WC9GGV Oct 19 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot R 3WC9GGV Oct 15 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot R 3WC9GGV Oct 15 2015 FOX SWIPER Jul 01 2016 Jul 02 2016 SelectSpot + R 3WC9HFW Oct 15 2015 FOX SWIPER Jul 02 2016 Jul 03 2016 SelectSpot Here is the JSP that is working - names have been changed to protect the innocent. <%@ include file="/common/taglibsref.jspf" %> <script type="text/javascript" src="<c:url value="/js/jquery-1.12.2.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/jquery.dataTables.min.js"/>"></script> <script> jQuery(document).ready(function() { var objectArr = []; jQuery('.dataRow').each(function() { var tdArr = this.getElementsByTagName("td"); var message = { status:tdArr[0].innerHTML, histno:tdArr[1].innerHTML, datemade:tdArr[2].innerHTML, lastname:tdArr[3].innerHTML, firstname:tdArr[4].innerHTML, adate:tdArr[5].innerHTML, ddate:tdArr[6].innerHTML, processed:tdArr[7].innerHTML, select:tdArr[8].innerHTML }; objectArr.push(message); }); jQuery('#messageRows').DataTable( { data: objectArr, "iDisplayLength": 15, "aLengthMenu": [[15, 25, 50, 100,-1], [15, 25, 50, 100, "All"]], "columns": [ { "mData": "status" }, { "mData": "histno" }, { "mData": "datemade" }, { "mData": "lastname" }, { "mData": "firstname" }, { "mData": "adate" }, { "mData": "ddate" }, { "mData": "processed" }, { "mData": "select"} ], "order": [[ 1, "asc" ], [2,"asc"]], }); }); </script> <div class="crumbs"> <span class="leftcrumbs"> <html:link action="/searchForm" name="searchForm" property="allParams">History</html:link> &gt; <span class="current">Search Results</span> </span> </div> <div class="search"> <table cellspacing="0" cellpadding="0"> <c:if test="${empty searchForm.searchResults}"> <tr><td><span class="errors">No history have been found for the specified search criteria.<br><br></span></td></tr> </c:if> </table> </div> <table id="messageRows" class="display compact" cellspacing="0" width="100%"> <thead> <tr> <th>Status</th> <th>History</th> <th>Date Made</th> <th>Last Name</th> <th>First Name</th> <th>A Date</th> <th>D Date</th> <th>Processed</th> <th>Select</th> </tr> </thead> <tfoot> <tr> <th>Status</th> <th>Histoyr</th> <th>Date Made</th> <th>Last Name</th> <th>First Name</th> <th>A Date</th> <th>D Date</th> <th>Processed</th> <th>Select</th> </tr> </tfoot> </table> <table id="dataTable" style="display: none;"> <c:forEach var="combo" items="${searchForm.searchResults}"> <tr class="dataRow"> <td><c:out value="${history.status}"/></td> <td><c:out value="${history.history}"/></td> <td><fmt:formatDate pattern="MMM dd yyyy" value="${history.dateMade.date}"/></td> <td><c:out value="${history.guest.lastName}"/></td> <td><c:out value="${history.guest.firstName}"/></td> <td><fmt:formatDate pattern="MMM dd yyyy" value="${history.dateSpan.beginDate}"/></td> <td><fmt:formatDate pattern="MMM dd yyyy" value="${history.dateSpan.exclusiveEndDate}"/></td> <td><c:out value="${history.processedFlag}"/></td> <td>SelectSpot</td> </tr> </c:forEach> </table>

I have seen this for active selecting, https://datatables.net/examples/api/select_single_row.html but what about highlighting a row based on data in the dataset used to fill the table?

As per the subject, when I add or edit the datatable everything works fine until the response comes back from the server (data was properly updated on the backed). At this time, neither the 'Add' nor 'Edit' modals disappear. Also at this time, I am no longer able to pull up the add/edit/delete modals. It's as if the DataTables plugin gets stuck in a certain state. Deleting multiple times works fine. Summary: - page loads, datatable populates with expected data - delete a user, works fine - delete another user, works fine - add/edit a user, user info saved to backend but modal doesn't close. no errors reported - clicking add/edit/delete no longer does anything My guess is that there is a problem with the returned JSON but I've inspected it using Chrome and this is my returned JSON: {"data":[{"DT_RowId":"row_8","id":"user-be469311-17c2-4991-9a01-fbf11953644f","name":"zzz user","email":"test@test2.com","phone":"5555555555","password":"","companyId":"aeryon-labs","eula":false,"disabled":false,"pilot":false,"group":"","company":""}]} This JSON appears to meet the requirements for what is expected in the response. Is there any other known reasons for the editor interface to operate this way? In case it's relevant, here's the code I used for the edit button: edit: { type: 'PUT', url: "/api/admin/user", data: function(row) { var user = row["data"]; var userInfo; var userId; // extract the user information from the row -- this may change when the returned data set is changed for (var key in user) { if(user.hasOwnProperty(key)) { userId = key; userInfo = user[key]; break; } } var name = userInfo["name"]; var email = userInfo["email"]; var phone = userInfo["phone"]; var companyId = userInfo["companyId"]; var company = userInfo["company"]; var group = userInfo["group"]; var pilot = userInfo["pilot"]; var disabled = userInfo["disabled"]; var userInfoJSON = {"id":userId, "submitType": "edit", "name":name, "email":email, "phone":phone, "companyId":companyId, "company":company, "group":group, "pilot":pilot, "disabled": disabled } return JSON.stringify(userInfoJSON); }, dataType: "json", contentType: "application/json", processData: true, cache: false, success: function(data) { table.ajax.reload(); //editor.close(); }, error: function() { //should be able to handle errors if we return the proper json object from the server -- requires errors[] } I tried to setup a test for demo purposes (actual site isn't available publicly) but we are using React and I wasn't able to get a valid test going. I've added as much code as possible to give an idea of what I'm doing. Hopefully this will be enough.