修复由ajax填充的html表中的标头 [英] Fix the headers in html table populated by ajax

问题描述

我以以下方式使用ajax调用填充html表-

$.ajax({
    type: "POST",
    url: "my_url",
    data: JSON.stringify(result),
    async: true,
    dataType: "json",
    contentType: "application/json; charset= Shift-JIS",
    success: function (response) {
        glResp = response;
        populateTable(glResp);
    },
    error: function (error) {
        console.log(error);
        //alert("Error!!");
    }
});

我用来填充表格的函数如下- JS -

function populateTable(finalObject) {
    var obj = finalObject;

    var headers1 = ['Name', 'City', 'Job', 'Salary'];
    var table = $("<table id='my-table' />");
    var columns = headers1;
    columns.unshift('');
    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));

    for (var i = 0; i < columnCount; i++) {
        if (i == 0) {
            var headerCell = $("<th><input type='button' id='sort'></th>");
            row.append(headerCell);
        }
        else {
            var headerCell = $("<th/>");
            headerCell.html([columns[i]]);
            row.append(headerCell);
        }
    }

    $.each(obj, function (i, obj) {
        $row = '<tr><td><input type="checkbox"></td><td>' + obj.Name + '</td><td>' + obj.City + '</td><td>' + obj.Job + '</td><td>' + obj.Salary + '</td></tr>';
        table.append(row);
    });

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);
}

现在，我希望在滚动数据时将表头固定在顶部.关于如何实施的任何想法?

解决方案

要修复标题，您可以为标题元素(th)添加thead，为chlid tr元素添加tbody，对于display:block两者和overflow:auto分别表示tbody元素.

 var tab  = '[{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"}]'
tab = JSON.parse(tab);
populateTable(tab);

function populateTable(finalObject) {
    var obj = finalObject;

    var headers1 = ['Name', 'City', 'Job', 'Salary'];
    var table = $("<table id='my-table' />");
    var columns = headers1;
    columns.unshift('');
    var columnCount = columns.length;
    var th = ""
    
    for (var i = 0; i < columnCount; i++) {
        if (i == 0) {
            var headerCell = "<th><input type='button' id='sort'></th>";
            th = th + headerCell;
        }
        else {
            var headerCell = "<th>"+[columns[i]]+"</th>";
           // headerCell.html();
            th = th + headerCell;
        }
    }
  
    table.prepend("<thead>"+th+"</thead>")
    
    $.each(obj, function (i, obj) {
        row = '<tr><td><input type="checkbox"></td><td>' + obj.Name + '</td><td>' + obj.City + '</td><td>' + obj.job + '</td><td>' + obj.Salary + '</td></tr>';
        table.append(row);
    });

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);
} 

 table{
  width:100%;
  }

td, th {
  min-width: 100px;
}
tbody{
  overflow: auto; 
  display: block; 
  height: 100px;
}
thead{
  display:block;
  text-align:left;
  background:green;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvCSV"><div> 

I am populating a html table using ajax call in the following manner-

$.ajax({
    type: "POST",
    url: "my_url",
    data: JSON.stringify(result),
    async: true,
    dataType: "json",
    contentType: "application/json; charset= Shift-JIS",
    success: function (response) {
        glResp = response;
        populateTable(glResp);
    },
    error: function (error) {
        console.log(error);
        //alert("Error!!");
    }
});

Function that I am using to populate the table is as follows - JS -

function populateTable(finalObject) {
    var obj = finalObject;

    var headers1 = ['Name', 'City', 'Job', 'Salary'];
    var table = $("<table id='my-table' />");
    var columns = headers1;
    columns.unshift('');
    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));

    for (var i = 0; i < columnCount; i++) {
        if (i == 0) {
            var headerCell = $("<th><input type='button' id='sort'></th>");
            row.append(headerCell);
        }
        else {
            var headerCell = $("<th/>");
            headerCell.html([columns[i]]);
            row.append(headerCell);
        }
    }

    $.each(obj, function (i, obj) {
        $row = '<tr><td><input type="checkbox"></td><td>' + obj.Name + '</td><td>' + obj.City + '</td><td>' + obj.Job + '</td><td>' + obj.Salary + '</td></tr>';
        table.append(row);
    });

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);
}

Now I want the table headers to be fixed on top when the data is being scrolled. Any idea as to how this can be implemented?

解决方案

For fix the header you can add thead for title element (th) and tbody for the chlid tr element, with display:block for both and overflow:auto for tbody element.

var tab  = '[{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"}]'
tab = JSON.parse(tab);
populateTable(tab);

function populateTable(finalObject) {
    var obj = finalObject;

    var headers1 = ['Name', 'City', 'Job', 'Salary'];
    var table = $("<table id='my-table' />");
    var columns = headers1;
    columns.unshift('');
    var columnCount = columns.length;
    var th = ""
    
    for (var i = 0; i < columnCount; i++) {
        if (i == 0) {
            var headerCell = "<th><input type='button' id='sort'></th>";
            th = th + headerCell;
        }
        else {
            var headerCell = "<th>"+[columns[i]]+"</th>";
           // headerCell.html();
            th = th + headerCell;
        }
    }
  
    table.prepend("<thead>"+th+"</thead>")
    
    $.each(obj, function (i, obj) {
        row = '<tr><td><input type="checkbox"></td><td>' + obj.Name + '</td><td>' + obj.City + '</td><td>' + obj.job + '</td><td>' + obj.Salary + '</td></tr>';
        table.append(row);
    });

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);
}

table{
  width:100%;
  }

td, th {
  min-width: 100px;
}
tbody{
  overflow: auto; 
  display: block; 
  height: 100px;
}
thead{
  display:block;
  text-align:left;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvCSV"><div>

这篇关于修复由ajax填充的html表中的标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！