locked
DataTable in asp.net = DataTables in AJAX RRS feed

  • Question

  • User1480781148 posted

    Hi Friends,

     As I am new to AJAX , I want to inquire is it possible how I can convert or change my asp.net datatable  (in asp.net 4.5) into ajax datatable and show as like gridview.

    thank you.

    regards,

    asad

    Thursday, November 20, 2014 1:33 AM

Answers

  • User1633621018 posted

    Hi asad,

    try below code

    //server code
    [WebMethod]
            public static string getGuestByGuestIDFront(string guest_id)
            {
                DataTable dt = BAL.getGuestByGuestID(guest_id);
    
                List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                Dictionary<string, object> row = null;
    
                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName, dr[col]);
                    }
                    rows.Add(row);
                }
    
                string json = js.Serialize(rows);
                return json;
            }
    
    //Code on UI
    $('#main-menu a').click(function(event) {   
    event.preventDefault();     
    $.ajax(this.href, {      
    success: function(serverdata) {   
       var tableData = $.parseJSON(serverdata.d);      
     $('#notification-bar').text('The page has been successfully loaded');      
    },      
    error: function() {         
    $('#notification-bar').text('An error occurred');      
    }   
    });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 20, 2014 2:15 AM
  • User61956409 posted

    Hi asad,

    Thanks for your post.

    You could refer to PawanPal’s solution to get a JSON data source then you need to load data in DataTables.

    Hope it will be helpful to you.

    Bset Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 21, 2014 12:15 AM

All replies

  • User1633621018 posted

    Hi asad,

    try below code

    //server code
    [WebMethod]
            public static string getGuestByGuestIDFront(string guest_id)
            {
                DataTable dt = BAL.getGuestByGuestID(guest_id);
    
                List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                Dictionary<string, object> row = null;
    
                foreach (DataRow dr in dt.Rows)
                {
                    row = new Dictionary<string, object>();
                    foreach (DataColumn col in dt.Columns)
                    {
                        row.Add(col.ColumnName, dr[col]);
                    }
                    rows.Add(row);
                }
    
                string json = js.Serialize(rows);
                return json;
            }
    
    //Code on UI
    $('#main-menu a').click(function(event) {   
    event.preventDefault();     
    $.ajax(this.href, {      
    success: function(serverdata) {   
       var tableData = $.parseJSON(serverdata.d);      
     $('#notification-bar').text('The page has been successfully loaded');      
    },      
    error: function() {         
    $('#notification-bar').text('An error occurred');      
    }   
    });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 20, 2014 2:15 AM
  • User1480781148 posted

    thank you for reply, in following code table id ="example" instead of  example table how I can add table from dataset (asp.net)

    ---code---

    <table id="example">
    <thead>
    <tr><th>Sites</th></tr>
    </thead>
    <tbody>
    <tr><td>SitePoint</td></tr>
    <tr><td>Learnable</td></tr>
    <tr><td>Flippa</td></tr>
    </tbody>
    </table>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>
    $(function () {
    $("#example").dataTable();
    })
    </script>

    Thursday, November 20, 2014 3:04 AM
  • User1633621018 posted

    Hi ,

    When are you calling your  function ($("#example").dataTable();)? Is it on some button click or page load?

    Thursday, November 20, 2014 3:31 AM
  • User1480781148 posted

    thank you for reply, as I am getting  following datatable  

    Dim dt1 As DataTable = TryCast(Session("dt1"), DataTable),  

    if in button I will add  following code  it will work

    $(function () {
    $("dt1").dataTable();
    })
    </script>

    Thursday, November 20, 2014 3:45 AM
  • User61956409 posted

    Hi asad,

    Thanks for your post.

    You could refer to PawanPal’s solution to get a JSON data source then you need to load data in DataTables.

    Hope it will be helpful to you.

    Bset Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 21, 2014 12:15 AM