根据下拉选择设置要在HTML表格中显示的行数 [英] Setting number of rows to display in HTML table according to dropdown selection
本文介绍了根据下拉选择设置要在HTML表格中显示的行数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用jQuery和json（ajax调用方法）根据ASP.Net（C＃）中的下拉选项设置HTML表格中显示的行数？
已经完成：
根据下拉选择显示表。现在，同一个表必须显示来自另一个下拉列表的分页（每页记录数量）。必须使用jquery，json。
我尝试过：
aspx page
< script type = 文本/ JavaScript的>
function funChangeTable（ddlObj）{
var name = ddlObj.value;
调试器;
$ .ajax（{
url：' JsonLast.aspx / GetTableData' ，
数据： JSON .stringify（{tableName：name}），
类型：' post'，
contentType： application / json; charset = utf-8，
dataType： json，
成功：功能（响应）{
调试器;
var json = JSON .parse（response.d）;
generateTable（json ）;
}，
错误：函数（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 标题）{
columns.push（' < th>' + col + < span class =code-string>' < / th>'）;
}
$ table.find（' thead'）。append（< span class =code-string>' < tr>' + columns.join（' '）+ ' < / tr> ）;
调试器;
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>
代码背后
受保护 void Page_Load（ object sender，EventArgs e）
{
var data = GetAllTableNames（）;
ddlTableNames.DataSource = data;
ddlTableNames.DataBind（）;
ddlTableNames.Items.Insert（ 0 ， 选择一个表）;
}
私有 静态 string [] GetAllTableNames（）
{
SqlConnection con = new SqlConnection（ @ user id = sa; password = ssa; database = Mohan; data source = PCTH101 \ PCTH101）;
SqlCommand cmd = new SqlCommand（ select来自sys.tables的名称，con）;
SqlDataAdapter da = new SqlDataAdapter（cmd）;
DataTable dt = new DataTable（）;
da.Fill（dt）;
return dt.AsEnumerable（）。选择（k = > k [ 0 ] + ）。ToArray（）;
}
[WebMethod]
public static string GetTableData（ string tableName）
{
if （GetAllTableNames（）。包含（tableName）） // 避免sql注入
{
SqlConnection con = new SqlConnection（ @ user id = sa; password = ssa; database = Mohan; data source = PCTH101\PCTH101）;
SqlCommand cmd = new SqlCommand（ select *来自 + tableName，con）;
SqlDataAdapter da = new SqlDataAdapter（cmd）;
DataTable dt = new DataTable（）;
da.Fill（dt）;
string json = JsonConvert.SerializeObject（dt）;
return json;
}
else
return 找不到表名;
}
解决方案
.ajax（{
url：' JsonLast.aspx / GetTableData'，
data： JSON .stringify（{tableName：name}），
类型：' post'，
contentType： application / json; charset = utf-8，
dataType： json，
成功： function （响应）{
调试器;
var json = JSON .parse（response.d）;
generateTable（json）;
}，
错误： function （a，b，c）{
console .log（a ，b，c）;
}
}）;
}
function generateTable（json）{
var
table =
（' ＃tblDynamic'）;
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";
}
解决方案
.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');
这篇关于根据下拉选择设置要在HTML表格中显示的行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
