Server Side Processing with more complex JSON object.

dhilbmann

Hey everyone. I have a search page that has check/radio button filters on the left side, a search box at the top, and a datatable to display results. Clicking the search button, checking a filter checkbox/radio, or changing the datatable pagination calls a function on my Controller that returns a JSON object. I want all actions to go through the same point because everything the count items on each filter option, as well as the results, will change on every action.

My datatable is set up for ServerSide processing and the JSON being returned looks like this:

{
"OtherStuff": {},
"FilterStuff": "stuff",
"DTResults": {
"draw": 10,
"data": [],
"recordsFiltered": 10,
"recordsTotal": 10
}
}

The DTResults property of my JSON is what I want to bind to the DataTables, but the rest of the properties are used elsewhere on my page for things like updating counts next to filter items. How do I get the Results.DTResults to bind to my DataTable (enabling pagination) while still letting me use the rest of the JSON to change everything else on my page?

allan

If you already have the object returning like that, then there should be no extra configuration required. DataTables will just ignore any properties in the JSON that it isn't looking for.

Allan

dhilbmann

Thanks for the reply Allan.

It's good to hear that DT should make use of my JSON the way I have it, but what about the other properties? I have everything bundled in a single JSON so DataTables can use one property but I can write some client-side script to use the other properties that DataTables would ignore.

I think I'm looking for a solution like...

1) Get the JSON object from an Ajax call and, on success, pass the DTResults to the DataTable object while using the rest of the JSON properties however else I need to, or...
2) Get the JSON using DataTables Ajax/ServersideProcessing, let DataTables use the DTResults however it needs to, but then have some DT function that lets me use the JSON object however I want to for additional DOM manipulation outside of the DataTable.

What are your thoughts thoughts on this?

allan

but then have some DT function that lets me use the JSON object however I want to for additional DOM manipulation outside of the DataTable.

initComplete will let you do that. It passed in the JSON once DataTables has finished its initialisation. There is also ajax.json() to get the JSON object that has been loaded via the API if you need that.

Allan

dhilbmann

Allan, this is some good stuff man. I went with the API and was able to access the JSON properties that way. Performance wise everything is happening quick and easy... but, I must be doing something else wrong because my paging and result counts aren't lining up properly.

'''$(document).ready(function () {
oTable = $("#enchancedSearchResultTable").dataTable({
"oLanguage": { "sProcessing": "LOL OOPS" },
filter: false,
displayLength: 25,
lengthChange: false,
dom: ConstructSDom(false, false, true, true),
paging: true,
allowSpecialCharInColumnNames: false,
stateSave: false,
processing: true,
serverSide: true,
autoWidth: false,
ajax: {
url: baseUrl + "TrainingCatalog/Search/RefreshViews",
type: "POST",
cache: false,
//dataSrc: "DTResults",
dataSrc: "DTResults.data",
data: function(d) {
d.searchTerm = $("#srch-term").val();
d.category = ""; //$("input[name='search_content_types']:checked").val(),
d.deliveryType = $.map($("input[name='search_content_types']:checked"), function (n, i) { return n.value; }).join(',');
d.recentActivity = $("input[name='search_recent_activity']:checked").val();
d.createdWithin = $("input[name='search_created_within']:checked").val();
d.provider = $("input[name='search_provider']:checked").val();
d.sponsor = $("input[name='search_sponsor']:checked").val();
d.showInactive = false; //$("input[name='search_content_types']:checked").val(),
d.sortType = "RELEVANCY";//$("input[name='search_content_types']:checked").val()
}
},
columns: [
{
data: 0,
orderable: false,
render: function (data, type, row) {
return row;
}
}
]
});
oTable.api().columns.adjust();

//// Updates filters (and anything else) after the udpated DataTable has been loaded.
oTable.on('xhr.dt', function (e, settings, json, xhr) {
    // Pull Sidebar HTML and set in place.
    $('#FilterSidebar').html(json.MenuFilterView);
    $('.loading-overlay').addClass("hidden");
});

});'''

I learned that part of my problem was the DataSource wasn't properly set on my Ajax property so I initially set it to "DTResults" in hopes that data, draw, recordsFiltered, and recordsTotal would just fall into place. Once I changed the DataSrc to "DTResults.data" then I was able to get rows to appear in my table but the Results and Paging aren't working. For my count text I see "Showing 0 to 0 of 0 entries (filtered from NaN total entries)" and the paging is showing multiple pages when I only have two items in my result set.

Is there anything obvious that jumps out at you?

dhilbmann

Nevermind Allan, one of the guys I work with suggested that I put some of the DTResults parameters ("recordsFiltered" and "recordsTotal") in the top level JSON object. Once I did that DataTables knew what to do. :) Thanks again for all the help man. I appreciat eit.

allan

Yup - those properties are hard fixed at the top level at the moment. Good to hear you got it working.

Allan