[RESOLVED]clientside paging is not working in gridview

Hi ,

I want to bind gridview using jquery. and also do paging in jquery.

problem is binding in gridview is fine but paging is not working.

if add an alert command in document.ready function it will work.

following is code

      

 if (!IsPostBack)
        {
            
            BindColumnToGridview();
        }

 private void BindColumnToGridview()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("TourDate");
        dt.Columns.Add("100");
        dt.Columns.Add("101");
        dt.Columns.Add("102");

}

public class Busdetails
    {
        public string  tour_date { get; set; }
        public string busid1 { get; set; }
        public string busid2 { get; set; }
        public string busid3 { get; set; }

}

 [WebMethod]
    public static Busdetails[] BindGrid(string date)
    {
        string msg = "";
        DataTable dt = new DataTable();
        List<Busdetails> details = new List<Busdetails>();
        SqlConnection con = new SqlConnection(@"Data Source=.sqlserver;Initial Catalog=BAiju;Integrated Security=True");       
            
                con.Open();
                SqlCommand cmd = new SqlCommand("bookstatus", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@dte", date);
         
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                   Busdetails user = new Busdetails();
                   user.tour_date = dtrow["tourdate"].ToString();
                   user.busid1 = dtrow["100"].ToString();
                   user.busid2 = dtrow["101"].ToString();
                   user.busid3 = dtrow["102"].ToString();
                 
                    
                    details.Add(user);
                }
                con.Close();
           // }
        
        return details.ToArray();

    }

//

jquery code

function myfunction() {
            var hfbus = "2014-09-01";
            //alert(hfbus);
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Test.aspx/BindGrid",
                data: "{'date':'" + hfbus + "'}",
                dataType: "json",
                success: function (data) {                   
                    $('#GridView3').show()
                    if (data.d.length > 0) {
                        $('.gd1').empty();
                        $('#GridView3').show();
                        for (var i = 0; i < data.d.length; i++) {
                            $("#GridView3").append("<tr class='record'><td>" + data.d[i].tour_date + "</td><td class='wd'>" + data.d[i].busid1 + "</td><td  class='wd'>" + data.d[i].busid2 + "</td><td  class='wd'>" + data.d[i].busid3 + "</td><td  class='wd'>" + data.d[i].busid4 + "</td><td  class='wd'>" + data.d[i].busid5 + "</td><td  class='wd'>" + data.d[i].busid6 + "</td></tr>");

                        }
                    }
                    else {
                        $('#GridView3').hide();
                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });

        }

code for call function in readyfunction and code for paging

 $(document).ready(function () {
            ////////
            
             myfunction();



            
            ////////////////////////
//code for paging

            var rows = $('#GridView3').find(' tbody  .record ').length;
            var no_rec_per_page = 16;
            var modtest = rows % no_rec_per_page;
            var no_pages = Math.ceil(rows / no_rec_per_page);

            var $pagenumbers = $('<div id="pages"></div>');
            for (i = 0; i < no_pages; i++) {
                $('<a href="#" id=' + (i + 1) + ' class="page">' + (i + 1) + '</a>').appendTo($pagenumbers);
            }
            $pagenumbers.insertAfter('#GridView3').find('.page:first').removeAttr("href");


            $('#GridView3').find(' tbody .record ').hide();
            var tr = $('#GridView3   tbody  .record  ');
            if (ndate < 16) {
                for (var i = 0; i <= no_rec_per_page - 1; i++) {
                    $(tr[i]).show();
                }
            }
            else {
                $('#GridView3').find(' tbody .record ').hide();
                var tr = $('#GridView3   tbody  .record  ');
                for (i = no_rec_per_page; i <= 2 * no_rec_per_page - 1; i++) {

                    $(tr[i]).show();
                    $('#2').removeAttr("href").siblings().attr("href", "#");

                }
            }
            $('.page').click(function (event) {                
                $('#GridView3').find(' tbody .record ').hide();
                for (i = ($(this).text() - 1) * no_rec_per_page; i <= $(this).text() * no_rec_per_page - 1; i++) {
                    $(tr[i]).show();
                    $(this).removeAttr("href").siblings().attr("href", "#");
                }                
            });

this code will work fine except paging.

if add alert in document .readyfunction paging will work .

how to solve this iam already struck here

Regards

Baiju

From where you are calling paging function?

My suggestion is

- create a javascript function ‘BusDetailsPaging’ and write all the code for paging 

function BusDetailsPaging()
{
 // Code for paging
}

- Call this method from success section of myfunction()

 success: function (data) {                   
         $('#GridView3').show()
         if (data.d.length > 0) {
             $('.gd1').empty();
             $('#GridView3').show();
             for (var i = 0; i < data.d.length; i++) {
             $("#GridView3").append("<tr class='record'><td>" + data.d[i].tour_date + "</td><td class='wd'>" + data.d[i].busid1 + "</td><td  class='wd'>" + data.d[i].busid2 + "</td><td  class='wd'>" + data.d[i].busid3 + "</td><td  class='wd'>" + data.d[i].busid4 + "</td><td  class='wd'>" + data.d[i].busid5 + "</td><td  class='wd'>" + data.d[i].busid6 + "</td></tr>");

             }
BusDetailsPaging();
} else { $('#GridView3').hide(); } },

Hi  Zinnia ,

I have changed the code as per your suggestion like create a paging function and add in in success function like this

 BusDetailsPaging();.

when i change like this grid doesn't show the record

In paging code you wrote

if (ndate < 16) {
                for (var i = 0; i <= no_rec_per_page - 1; i++) {
                    $(tr[i]).show();
                }

}

What is ndate?

Change it to like this since i dont kow what is ‘ndate’.

if (no_pages < 16) {
    for (var i = 0; i <= no_rec_per_page - 1; i++) {
         $(tr[i]).show();
    }
}
else {
   $('#GridView3').find(' tbody .record ').hide();
   var tr = $('#GridView3   tbody  .record  ');
   for (i = no_rec_per_page; i <= 2 * no_rec_per_page - 1; i++) {

   $(tr[i]).show();
   $('#2').removeAttr("href").siblings().attr("href", "#");

    }
}

Hi Zinnia thanks for your help .it is working fine.

do you know how to debug jquery line by line.

hi sir,

Two approaches we could use to debug jquery  code .

1.VS 2013. you could add the breakpoint on javascript or jquery code. (http://stackoverflow.com/questions/20160784/debug-javascript-in-visual-studio-2013-with-just-my-code)

2.using the browser to debug (http://stackoverflow.com/questions/1955433/how-to-debug-your-jquery-script)

Regards,

Will

Leave a Reply