Last active
May 21, 2023 12:47
-
-
Save stokito/636fe881e084c740b4ae4cb1709c52e9 to your computer and use it in GitHub Desktop.
bootstrap-table load CSV https://github.com/wenzhixin/bootstrap-table/issues/6105
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Sample of BootStrap Table that render CSV file</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<!-- bootstrap itself --> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha256-7ZWbZUAi97rkirk4DcEp4GWDPkWpRMcNaEyXGsNXjLg=" crossorigin="anonymous"> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha256-wMCQIK229gKxbUg3QWa544ypI4OoFlC2qQl8Q8xD8x8=" crossorigin="anonymous"></script> | |
<!-- jquery needed for bootstrap-table--> | |
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | |
<!-- bootstrap-table--> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.20.2/dist/bootstrap-table.min.css" integrity="sha256-LeU0tzGXsUojxMQgTdjRB74+q8RQhqUQoobY4+76cY8=" crossorigin="anonymous"> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.20.2/dist/bootstrap-table.min.js" integrity="sha256-lQSRQ2EUXUKg2xkKTV+D0E3rACEAi1aI+809LI5drdc=" crossorigin="anonymous"></script> | |
<script src="./csv-json.js"></script> | |
<script> | |
function responseHandlerCsvWithoutHeader(csvText) { | |
// we should specify column names manually | |
let headers = ['Id', 'Name'] | |
return responseHandlerCsvToJsonHeaders(csvText, headers); | |
} | |
</script> | |
</head> | |
<h2>responseHandlerCsvToJson:</h2> | |
<table | |
id="table" | |
data-toggle="table" | |
data-escape="true" | |
data-response-handler="responseHandlerCsvToJson" | |
data-data-type="text" | |
data-url="data.csv"> | |
<thead> | |
<tr> | |
<th data-field="Id">ID</th> | |
<th data-field="Name">Name</th> | |
</tr> | |
</thead> | |
</table> | |
<h2>responseHandlerCsvWithoutHeader:</h2> | |
<table | |
id="tableWithoutHeader" | |
data-toggle="table" | |
data-escape="true" | |
data-response-handler="responseHandlerCsvWithoutHeader" | |
data-data-type="text" | |
data-url="data-without-header.csv"> | |
<thead> | |
<tr> | |
<th data-field="Id">ID</th> | |
<th data-field="Name">Name</th> | |
</tr> | |
</thead> | |
</table> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function responseHandlerCsvToJson(csvText) { | |
let csvLines = csvText.split("\n") | |
if (csvLines.length <= 1) { | |
return {rows: []} | |
} | |
let headers = csvLines[0].split(",") | |
return csvLinesToJsonRows(csvLines.slice(1), headers); | |
} | |
function responseHandlerCsvToJsonHeaders(csvText, headers) { | |
let csvLines = csvText.split("\n") | |
return csvLinesToJsonRows(csvLines, headers); | |
} | |
// Convert CSV to array of objects. | |
// NOTE: there is no any unqoting for string and all fields become a string type even numbers | |
function csvLinesToJsonRows(csvLines, headers) { | |
let jsonRows = [] | |
for (let csvLineIdx = 0; csvLineIdx < csvLines.length; csvLineIdx++) { | |
let csvLine = csvLines[csvLineIdx] | |
if (!csvLine) { | |
continue | |
} | |
let fields = csvLine.split(",") | |
let row = {} | |
if (fields.length === 0) { | |
continue | |
} | |
for (let headerIdx = 0; headerIdx < headers.length; headerIdx++) { | |
let header = headers[headerIdx] | |
if (fields.length > headerIdx) { | |
row[header] = fields[headerIdx] | |
} | |
} | |
jsonRows[csvLineIdx] = row | |
} | |
return {rows: jsonRows} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 | First | |
---|---|---|
2 | Second |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Id | Name | |
---|---|---|
1 | First | |
2 | Second |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment