Jquery datatable is consuming memory by keeping the last searched result in memory

ritheam

I am using JQuery datatable to display the searched result in table format on screen.
So In my application, I am binding the filtered data to data table each time user clicks on search.
Eg: User is selecting value1 from filter, clicking on search, then I am hitting the database, fetching the filtered data and binding to datatable. so here memory consumption is say 10 KB, now user is selecting value 2, clicking on search, search result get bind to datatable, and now if will check memory consumptions, its 20 KB (previous 10KB + current 10 KB). So previous search data is also remaining in memory.

How I am binding the data to datatable:
on search button click, hitting the database, fetching the filtered data, then through AJAX handler, binding this data to data table.

So how can I resolve this memory consumption issue.

ritheam

For better understanding of issue, I am adding code snippet:
When user is clicking on search button from page.aspx.cs page:

protected void btnSearch_Click(object sender, EventArgs e)
     {
          SessionInfo.kitBacklogData = null;

          SessionInfo.kitBacklogData = pHandler.GetBacklogs(GetBacklogActiveFlag(), GetPartType(), GetBacklogTypeActiveFlag(), GetSelectedDesigner(), GetRoleForLoggedUser(), GetSource());

     ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "userBacklogDT", "userBacklogDT()", true);
        }

Then as on search, calling javascript function userBacklogDT() from page.aspx:

function userBacklogDT() {
            if (typeof $('#gvBacklog') != 'undefined') {
                $("#gvBacklog tbody tr").off(); 
                $("#gvBacklog tbody td").off(); 
                $("#gvBacklog tbody tr").off("click", "**"); 
                $("#gvBacklog").dataTable().fnClearTable();
                $("#gvBacklog").dataTable().fnDestroy();

            }
            $(document).ready(function () {
                oTable = $('#gvBacklog').dataTable({
                    "aLengthMenu": [[100, 200], [100, 200]],
                    "iDisplayLength": 100,
                    "scrollY": setGridHeight(),
                    "aaSorting": [[4, "desc"], [11, "asc"]],
                    "bProcessing": true,
                    "sAjaxSource": "/Handler/PageHandler.ashx",
                    "sAjaxDataProp": "aaData",
                    "bAutoWidth": false,
                    "fnInitComplete": function () { funAfterDTLoad(); },
                    "deferRender": true,
                    "deferLoading": 50,
                    "bStateSave": true,
                    "language": { "emptyTable": "Loading... Please Wait" })

                     fnResetAllFilters(oTable);
            });

Then, as above javascript calling the PageHandler.ashx through ajaxsource, so PageHandler.ashx code:
```
public static List<PageDTO> backlogs;

    public void ProcessRequest(HttpContext context)
    {
        var result = new Object();
        backlogs = SessionInfo.BacklogData;


                if (backlogs != null)
                {
                    result = new
                    {
                        iTotalRecords = backlogs.Count(),
                        iTotalDisplayRecords = backlogs.Count(),
                        aaData = backlogs
                           .Select(jq => new[]{ jq.PartNumber,
                           jq.JobNo,
                           jq.ChgLevel, 
                           jq.Description,
                           Convert.ToString(jq.Qty),
                           jq.EngineerAsignee.ToLower(), 
                           jq.E_Model,
                           jq.S_Model, 
                           jq.EngineType, 
                           jq.ApplicationType,
                           jq.Source,
                           jq.EntryDate.ToString(), 
                           jq.EngineerCompleteDate.ToString(),
                           jq.StatusDescription, 
                           jq.Notes, 
                           "Edit", 
                           jq.PCCEStatus ,
                           Convert.ToString( jq.ID),
                           jq.StatusCode,jq.PartType,jq.Part_Product_type})
                    };

                }
        var serializer = new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue, RecursionLimit = 100 };
        var json = serializer.Serialize(result);
        context.Response.ContentType = "application/json";
        context.Response.Write(json.Replace("null","\"\""));
    }

ThomD

What version of datatables? I ask because you are using pre1.10 syntax. To be clear, you are not using DT's search, you are using a custom all to filter on the server side, right?

I'm not sure you need fnClearTable and fnDestroy. If you are just replacing the data, fnClearTable should be enough.

Check this discussion. It get off track slightly, but Allan clear states the DT isn't supposed to be caching old data. It might be a side effect of using developer tools.

https://datatables.net/forums/discussion/14471/cache-control

ritheam

Thank you for your response.
I am using datatable 1.10.4.
Yes, I am using custom search.
Also, I have checked the discussion in the link provided above, so accordingly, I have tried following things:
1. Set the "cache":false attribute in userBacklogDT() function.
2. Set the "cache":false in jQuery.datatables.js

But still my issue is not resolved, still there is previous searched data in memory, it is not getting cleared.

tangerine

I don't know asp, so this might be nonsense, but I notice you clear and reset "SessionInfo.kitBacklogData" in your click function while your search function is referencing "SessionInfo.BacklogData".

Is "SessionInfo.BacklogData" getting cleared and reset anywhere?

ritheam

@tangerine: Yes, I am clearing the session each time, before storing new data in it.

allan

I think we'd probably need to be able to see the page to figure out what is going on. I would also suggest updating to 1.10.9 as I've address a few possible memory leaks since the 1.10.4 version.

Allan