Skip to content

Instantly share code, notes, and snippets.

@stokito

stokito/bootstrap-table-csv.html

Last active May 21, 2023 12:47
Show Gist options
  • Save stokito/636fe881e084c740b4ae4cb1709c52e9 to your computer and use it in GitHub Desktop.
Save stokito/636fe881e084c740b4ae4cb1709c52e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-table-csv.html
<!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/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-7ZWbZUAi97rkirk4DcEp4GWDPkWpRMcNaEyXGsNXjLg=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-wMCQIK229gKxbUg3QWa544ypI4OoFlC2qQl8Q8xD8x8=" crossorigin="anonymous"></script>
<!-- jquery needed for bootstrap-table-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- bootstrap-table-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css" integrity="sha256-LeU0tzGXsUojxMQgTdjRB74+q8RQhqUQoobY4+76cY8=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Raw
csv-json.js
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}
}
Raw
data.csv
Id Name
1 First
2 Second
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment