0

I am having a webpage that is displaying the data using Datatable plugin in Table tableRepriceResponseFiles. Here I am basically doing the following two things in the Javascript.

1.If the NoOfDays > 7, differentiate the text in Red color

2.Datatable Pagination

The below code is displaying the following Script Error Message.

Stop Running this script? "A Script on this Page is causing your web browser to run slowly. If it continues to run, your computer might become unresponse."

When i comment either of the two below things, then it is not displaying that Script Error Message. But I want to change the text color to Red and apply Pagination.

I am wondering how i can get rid of this message? Any inputs is highly appreciated.

<script type="text/javascript">  
$(document).ready(function () {      

 //If the NoOfDays > 7, differentiate the text in Red color
                $('#RepriceResponseFiles td.clsDays').each(function () {
                    if (parseInt($(this).text()) > 7) {
                        $(this).css("color", "red");
                    }
                });

                //Datatable Pagination
                $('#RepriceResponseFiles').dataTable(
                {
                    "sPaginationType": "full_numbers",
                    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    "iDisplayLength": 100
                });


}); 
</script>
Rita
  • 1,237
  • 5
  • 24
  • 46
  • 1
    Didn't you ask this same question yesterday? One of the comments was 'How big is your table?'. If you are trying to do client side paging and row coloring on a long table, you will encounter this message. If the table is sufficiently large (there is no hard number here), you should consider doing this server side. The CSS style should easily be done by passing an extra parameter in your view model and will prevent JQuery from looping through the table to apply a style. – Tommy Mar 28 '12 at 17:18
  • Yes. I asked yesterday. Now I got the answer! Thanks. I am taking care of it from ViewModel. Not sure how to mark this as the answer! – Rita Mar 28 '12 at 21:19
  • Looks like... It is still coming. I guess i have to do it Serverside. – Rita Mar 29 '12 at 13:48
  • I'll move that comment down as an answer and add some more suggestions. My opening sounded a little 'jerky' anyways :) – Tommy Mar 29 '12 at 14:57

1 Answers1

1

Doing things client side can be nice, but depending on the size of your table, JQuery and the related plugins to apply styles, table pagination and sorting can take quite a bit of time. There is no 'hard number' here on the size of a large table. Some things you can try:

  1. The style that your applying should be very easy to do server side. Add a property to your view model called style and use that for setting the row color as you loop through your view model.

  2. The paging stuff is going to be more difficult to implement server side (create an action method that takes (int PageNumber, int Count). There are lots of SO post on doing this though and you should see a decent performance increase on your page load times if the script is timing out. Example Post 1, Example Post 2 (If you are using MVC3, it looks like there is a WebGrid that can take care of this for you, but I have not used it and you will need to do some leg work on seeing if it will do the right stuff for you)

  3. Maybe the JQuery plugin you are using is simply not a good one? I don't know what you are using, but you could play around with some others and see if you get better performance.

The basic idea for point 2 would look like:

public ActionResult GetPagedData(int pageNumber, int ItemCount){
     return PartialViewResult("MyGrid", 
     this.GetMyItems().skip((PageNumber -1) * ItemCount).Take(ItemCount));
}

Overall, the JQuery stuff is really nice but for large datasets, you will get much much better performance doing paging and sorting server side. This is where I think your slowdown is coming from. The way these JQuery plugins work, the server sends the entire dataset and JQuery shows/hides the rows based on the options you have set. By doing this pagination server side, you are only sending the required data to the client for the page of data that they are looking at. This results in less data being sent from the server and should eliminate the warning that you are seeing. You can still use AJAX request to get the next/previous page of data to keep the AJAX-y feel of the plugin.

Community
  • 1
  • 1
Tommy
  • 39,592
  • 10
  • 90
  • 121