Setting number of rows to display in HTML table according to dropdown selection

See more:

C#

ASP.NET

Ajax

jQuery

JSON

How do I set the number of rows to display in a HTML table according to a drop-down selection in ASP.Net (C#) using jQuery and json (ajax call method)?

Already done:
Displaying table based on drop down selection.now same table have to display pagination from another drop down list(no.of records count per page).here also have to use jquery,json.

What I have tried:

aspx page

<script type="text/javascript">
        function funChangeTable(ddlObj) {
            var name = ddlObj.value;
            debugger;
            $.ajax({
                url: 'JsonLast.aspx/GetTableData',
                data: JSON.stringify({ tableName: name }),
                type: 'post',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    debugger;
                    var json = JSON.parse(response.d);
                    generateTable(json);
                },
                error: function(a, b, c) {
                    console.log(a, b, c);
                }
            });
        }
 
        function generateTable(json) {
         
            var $table = $('#tblDynamic');
            $table.find('thead').empty()
            $table.find('tbody').empty()
            if (json && json.length > 0) {
                var header = json[0];
                var columns = [];
                for (var col in header) {
                    columns.push('<th>' + col + '</th>');
                }
                $table.find('thead').append('<tr>' + columns.join('') + '</tr>');
                debugger;
                var rows = [];
                for (var i = 0; i < json.length; i++) {
                    debugger;
                    var row = json[i];
                    var tds = [];
                    for (var col in row) {
                        tds.push('<td>' + row[col] + '</td>');
                       // tds.push('<td>' + row.city_name + '</td>');
                       // tds.push('<td>' + row.population + '</td>');
                       //tds.push('<td>' + row.year + '</td>');
                    }  
                    rows.push('<tr>' + tds.join() + '</tr>');
                }
                $table.find('tbody').append(rows.join(''));
            }
 
        }
 
    </script>

code behind

protected void Page_Load(object sender, EventArgs e)
{
    var data = GetAllTableNames();
    ddlTableNames.DataSource = data;
    ddlTableNames.DataBind();
    ddlTableNames.Items.Insert(0, "Select a Table");
}
private static string[] GetAllTableNames()
{
    SqlConnection con = new SqlConnection(@"user id=sa;password=ssa;database=Mohan;data source=PCTH101\PCTH101");
    SqlCommand cmd = new SqlCommand("select name from sys.tables", con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    da.Fill(dt);
    return dt.AsEnumerable().Select(k => k[0] + "").ToArray();
}
[WebMethod]
public static string GetTableData(string tableName)
{
    if (GetAllTableNames().Contains(tableName)) // To avoid sql injection
    {
        SqlConnection con = new SqlConnection(@"user id=sa;password=ssa;database=Mohan;data source=PCTH101\PCTH101");
        SqlCommand cmd = new SqlCommand("select * from " + tableName, con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        string json = JsonConvert.SerializeObject(dt);
        return json;
    }
    else
        return "Table Name Not Found";
}