locked
Add paging to dynamically created HTML data stored in string or literal control RRS feed

  • Question

  • User1041697782 posted

    I have created a data in <div> tags inside vb.net code behind file. I want to add paging feature to this data. M ycode display list of house for sale with images of house, price, address

    <asp:Literal ID="litPropertyCount" runat="server"></asp:Literal>

    litPropertyCount show count of total number of properties to be displayed based on search criteria.

    <asp:Literal ID="litProperty" runat="server" Visible="false"></asp:Literal> 

    litProperty display availables houses with images, price, address in table

    Here is my code to dynamically generate HTML for displaying house properties based on search criteria

     Private Sub LoadData(ByVal sFrom As String)

    While objRdr.Read()

    Dim sLine As String = ""

    sLine = "<table id=""dtproperty"">"  

    sLine = sLine & "<tr><td>"  

    sLine = sLine & " <div class=""property masonry"">"

    sLine = sLine & " <div class=""inner"">"

    sLine = sLine & " <a href=""Prop-det-" & sEnlace & "-" & objRdr("Pr_Id") & ".aspx"">"

    sLine = sLine & "<div class=""property-image"">"  

    sConPropuesta = ""

    If Not IsDBNull(objRdr("Pr_Con_Propuesta")) Then

      If CBool(objRdr("Pr_Con_Propuesta")) = True Then  

        sLine = sLine & "<figure Class=""tag status"">"     

         sConPropuesta = "Con propuesta aceptada"     

        sLine = sLine & sConPropuesta   

    End If

     End If  

    sLine = sLine & " </div>"

    sLine = sLine & " </div>"

    sLine = sLine & "</td></tr>"

    End While

    objRdr.Close()

    sLine = sLine & "</table>"

    litPropiedades.Text = sLine

    litPropiedadesCuenta.Text = i

    Tuesday, October 13, 2015 1:41 PM

Answers

  • User61956409 posted

    Hi ShailajaB,

    Welcome to ASP.NET forum.

    Firstly, why don’t you use data control (repeater, gridview or datalist) to display house list? It will be easy for us to implement paging.

    Secondly, you could call a web method to get houses’ information based on current page index and page size using jQuery AJAX. Then you could empty original html table and recreate a new table in AJAX success callback function based on returned data.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 13, 2015 10:56 PM

All replies

  • User61956409 posted

    Hi ShailajaB,

    Welcome to ASP.NET forum.

    Firstly, why don’t you use data control (repeater, gridview or datalist) to display house list? It will be easy for us to implement paging.

    Secondly, you could call a web method to get houses’ information based on current page index and page size using jQuery AJAX. Then you could empty original html table and recreate a new table in AJAX success callback function based on returned data.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 13, 2015 10:56 PM
  • User-1667135504 posted

    Its good if you use Gridview or Repeater Control other wise you can do with jQuery.

    You can create dynamic table in jQuery, and fill data by making a jQuery Ajax call [WebMethod].

    For pagination you can check encosia Tutorial: Client side ajax paging using jquery 

    Wednesday, October 14, 2015 4:10 AM
  • User1041697782 posted

    I am storing the whole HTML data in a string "sLine" in code behind which will displayed on the browser. Is it possible to retrieve "sLine" in ajax and then bind it with Jquery Datatable. Since Jquery DataTable provide inbuilt paging functionality. I am not using Gridview or Repeater control because I am not sure about the column names and data. Column names and data are genderated dyanmically

    Wednesday, October 14, 2015 11:08 AM
  • User61956409 posted

    Hi ShailajaB,

    I am storing the whole HTML data in a string "sLine" in code behind which will displayed on the browser. Is it possible to retrieve "sLine" in ajax and then bind it with Jquery Datatable.

    “sLine” stores the string of html table “dtproperty”, you could refer to the following code to retrieve it.

    var sLine = $("#dtproperty").html();

    Best Regards,

    Fei Han

    Thursday, October 15, 2015 4:23 AM