I use bootstrap-table, because the data is displayed by one of the list from the objects returned from the backend, so I cannot write the interface and return the data directly in the js configuration. I default to how to render the data to table by default after the data is requested by ajax. I see that most of the online tutorials are rendered dynamically from the server.
I hope there is a god who can teach me a reliable solution that can get data such as ajax and render it to the page!
Let"s assume that I"ve got an array of data projectList
. 
var $table = $("-sharpprojectTable"),
$remove = $("-sharpremove"),
selections = [];
function initTable() {
$table.bootstrapTable({
height: getHeight(),
data:data1,
method:"get",
url:"/",
toolbar:"-sharptoolbar",
cache: false, // false AJAX true
striped: true, //false
pagination: true, // false
pageList: [10, 20, 50, 100, "ALL"], //
pageSize: 10, //
pageNumber: 1, //
sidePagination: "client", //
/*queryParams: function (params) { // false
return {
pageSize: params.limit, //
offset: params.offset, //
sort: params.sort, //
sortOrder: params.order, //
dataId: $("-sharpdataId").val() //
}
},*/
sortName: "id", //
sortOrder: "desc", // ,
search: true, //
strictSearch: true,
showColumns: true, //
showRefresh: true, //
minimumCountColumns: 2, //
clickToSelect: true, //
uniqueId: "ID", //
// showToggle:true, //
cardView: false, //
detailView: false, //
showExport: true,
exportDataType: "all",
exportTypes:[ "csv","excel","pdf"], //
columns: [
{
checkbox: true, //
align: "center" //
}, {
field: "statusOrder", // jsonname
title: "", //
align: "center", //
valign: "middle", //
sortable: true,
/*editable: {
type: "text",
title: "",
validate: function (value) {
value = $.trim(value);
if (!value) {
return "";
}
if (!/^\+?[1-9][0-9]*$/.test(value)) {
return "0."
}
}
},*/
}, {
field: "statusName",
title: "",
align: "center",
valign: "middle",
sortable: true,
/*editable: {
type: "text",
title: "",
validate: function (value) {
value = $.trim(value);
if (!value) {
return "";
}
var data = $table.bootstrapTable("getData"),
index = $(this).parents("tr").data("index");
console.log(data[index]);
return "";
}
},*/
}, {
field: "statusInfo",
title: "",
align: "center",
valign: "middle",
sortable: true,
/*editable: {
type: "text",
title: "",
validate: function (value) {
value = $.trim(value);
if (!value) {
return "";
}
var data = $table.bootstrapTable("getData"),
index = $(this).parents("tr").data("index");
console.log(data[index]);
return "";
}
},*/
}, {
field: "formModels",
title: "",
align: "center",
valign: "middle",
/*editable: {
type: "text",
title: "",
validate: function (value) {
value = $.trim(value);
if (!value) {
return "This field is required";
}
if (!/^\$/.test(value)) {
return "This field needs to start width $."
}
var data = $table.bootstrapTable("getData"),
index = $(this).parents("tr").data("index");
console.log(data[index]);
return "";
}
},*/
}, {
field: "tableModels",
title: "",
align: "center",
valign: "middle",
/*editable: {
type: "text",
title: "",
validate: function (value) {
value = $.trim(value);
if (!value) {
return "This field is required";
}
if (!/^\$/.test(value)) {
return "This field needs to start width $."
}
var data = $table.bootstrapTable("getData"),
index = $(this).parents("tr").data("index");
console.log(data[index]);
return "";
}
},*/
},{
title: "",
align: "center",
valign: "middle",
width: 160, // px
formatter: function (value, row, index) {
return "<button class="btn btn-primary btn-sm" onclick="del(\"" + row.field + value + "\")"></button>";
}
}
],
onLoadSuccess: function(){ //
console.info("");
},
onLoadError: function(){ //
console.info("");
}
/*columns: [
[
{
field: "state",
checkbox: true,
rowspan: 1,
align: "center",
valign: "middle"
}, {
title: "Item ID",
field: "id",
rowspan: 1,
align: "center",
valign: "middle",
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: "Item Detail",
field: "detail",
colspan: 3,
rowspan: 1,
align: "center"
}
],
/!*[
{
field: "name",
title: "Item Name",
sortable: true,
editable: true,
footerFormatter: totalNameFormatter,
align: "center"
}, {
field: "price",
title: "Item Price",
sortable: true,
align: "center",
editable: {
type: "text",
title: "Item Price",
validate: function (value) {
value = $.trim(value);
if (!value) {
return "This field is required";
}
if (!/^\$/.test(value)) {
return "This field needs to start width $."
}
var data = $table.bootstrapTable("getData"),
index = $(this).parents("tr").data("index");
console.log(data[index]);
return "";
}
},
footerFormatter: totalPriceFormatter
}, {
field: "operate",
title: "Item Operate",
align: "center",
events: operateEvents,
formatter: operateFormatter
}
]*!/
]*/
});
// sometimes footer render error.
setTimeout(function () {
$table.bootstrapTable("resetView");
}, 200);
$table.on("check.bs.table uncheck.bs.table " +
"check-all.bs.table uncheck-all.bs.table", function () {
$remove.prop("disabled", !$table.bootstrapTable("getSelections").length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data selections
});
$table.on("expand-row.bs.table", function (e, index, row, $detail) {
if (index % 2 == 1) {
$detail.html("Loading from ajax request...");
$.get("LICENSE", function (res) {
$detail.html(res.replace(/\n/g, "<br>"));
});
}
});
$table.on("all.bs.table", function (e, name, args) {
console.log(name, args);
});
$remove.click(function () {
var ids = getIdSelections();
$table.bootstrapTable("remove", {
field: "id",
values: ids
});
$remove.prop("disabled", true);
});
$(window).resize(function () {
$table.bootstrapTable("resetView", {
height: getHeight()
});
});
}
function getIdSelections() {
return $.map($table.bootstrapTable("getSelections"), function (row) {
return row.id
});
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1;
});
return res;
}
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push("<b>" + key + ":</b> " + value + "
");
});
return html.join("");
}
function operateFormatter(value, row, index) {
return [
"<a class="like" href="javascript：void(0)" title="Like">",
"<i class="glyphicon glyphicon-heart"></i>",
"</a> ",
"<a class="remove" href="javascript：void(0)" title="Remove">",
"<i class="glyphicon glyphicon-remove"></i>",
"</a>"
].join("");
}
window.operateEvents = {
"click .like": function (e, value, row, index) {
alert("You click like action, row: " + JSON.stringify(row));
},
"click .remove": function (e, value, row, index) {
$table.bootstrapTable("remove", {
field: "id",
values: [row.id]
});
}
};
function totalTextFormatter(data) {
return "Total";
}
function totalNameFormatter(data) {
return data.length;
}
function totalPriceFormatter(data) {
var total = 0;
$.each(data, function (i, row) {
total += +(row.price.substring(1));
});
return "$" + total;
}
function getHeight() {
return $(window).height() - $("h1").outerHeight(true);
}
function del(field,values) {
$("-sharpprojectTable").bootstrapTable("remove",filed,values);
}
function delMore(id) {
$("-sharpprojectTable").bootstrapTable("removeByUniqueId ",id);
}
$(function () {
var scripts = [
"https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js",
// location.search.substring(1) || "https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js",
"https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/export/bootstrap-table-export.min.js",
// "http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js",
"https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js",
"https://cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"
],
eachSeries = function (arr, iterator, callback) {
callback = callback || function () {
};
if (!arr.length) {
return callback();
}
var completed = 0;
var iterate = function () {
iterator(arr[completed], function (err) {
if (err) {
callback(err);
callback = function () {
};
}
else {
completed += 1;
if (completed >= arr.length) {
callback(null);
}
else {
iterate();
}
}
});
};
iterate();
};
eachSeries(scripts, getScript, initTable);
});
function getScript(url, callback) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function () {
if (!done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
if (callback)
callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
}
};
head.appendChild(script);
// We handle everything using the script element injection
return undefined;
}
//cookie cookie
function getCookie(name) {
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}