Detail view during using bootstrap-table not working
0
I am using bootstrap-table library working with jQuery.
I need to show a few details in each rows, it has a function for doing this.
I check everything, but still not working.
It has an attribute should be inserted in :
data-detail-view="true"
data-detail-formatter="detailFormatter"
I copy and paste my code here:
function detailFormatter(index, row) {
var html = ;
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b>' + value + '</p>');
});
return html.join('');
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
<thead>
<tr>
<th data-field="checkboxselect" data-checkbox="true"></th>
<th data-field="id" data-width="40" data-halign="center">ID</th>
<th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
<th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
<th data-field="treatmentPrice">Treatment price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Rhino plasty</td>
<td>range: $2000 to 3000$</td>
</tr>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Lift > Face lift</td>
<td>range: $2000 to 3000$</td>
</tr>
</tbody>
</table>but it is not working and do not change anything in my table, I also found that an error in my phpstorm about the function "detailFormatter"
not using in the page, but I use it as like as I explained above.
my actual result should be like this link : Example
jquery bootstrap-table
asked Jan 18 at 20:14
Reza Reza
74
add a comment |
0
I am using bootstrap-table library working with jQuery.
I need to show a few details in each rows, it has a function for doing this.
I check everything, but still not working.
It has an attribute should be inserted in :
data-detail-view="true"
data-detail-formatter="detailFormatter"
I copy and paste my code here:
function detailFormatter(index, row) {
var html = ;
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b>' + value + '</p>');
});
return html.join('');
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
<thead>
<tr>
<th data-field="checkboxselect" data-checkbox="true"></th>
<th data-field="id" data-width="40" data-halign="center">ID</th>
<th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
<th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
<th data-field="treatmentPrice">Treatment price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Rhino plasty</td>
<td>range: $2000 to 3000$</td>
</tr>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Lift > Face lift</td>
<td>range: $2000 to 3000$</td>
</tr>
</tbody>
</table>but it is not working and do not change anything in my table, I also found that an error in my phpstorm about the function "detailFormatter"
not using in the page, but I use it as like as I explained above.
my actual result should be like this link : Example
jquery bootstrap-table
asked Jan 18 at 20:14
Reza Reza
74
you forgot to include boostrap libs.
– gaetanoM
Jan 18 at 20:18
add a comment |
0
0
0
I am using bootstrap-table library working with jQuery.
I need to show a few details in each rows, it has a function for doing this.
I check everything, but still not working.
It has an attribute should be inserted in :
data-detail-view="true"
data-detail-formatter="detailFormatter"
I copy and paste my code here:
function detailFormatter(index, row) {
var html = ;
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b>' + value + '</p>');
});
return html.join('');
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
<thead>
<tr>
<th data-field="checkboxselect" data-checkbox="true"></th>
<th data-field="id" data-width="40" data-halign="center">ID</th>
<th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
<th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
<th data-field="treatmentPrice">Treatment price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Rhino plasty</td>
<td>range: $2000 to 3000$</td>
</tr>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Lift > Face lift</td>
<td>range: $2000 to 3000$</td>
</tr>
</tbody>
</table>but it is not working and do not change anything in my table, I also found that an error in my phpstorm about the function "detailFormatter"
not using in the page, but I use it as like as I explained above.
my actual result should be like this link : Example
jquery bootstrap-table
asked Jan 18 at 20:14
Reza Reza
74
I am using bootstrap-table library working with jQuery.
I need to show a few details in each rows, it has a function for doing this.
I check everything, but still not working.
It has an attribute should be inserted in :
data-detail-view="true"
data-detail-formatter="detailFormatter"
I copy and paste my code here:
function detailFormatter(index, row) {
var html = ;
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b>' + value + '</p>');
});
return html.join('');
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
<thead>
<tr>
<th data-field="checkboxselect" data-checkbox="true"></th>
<th data-field="id" data-width="40" data-halign="center">ID</th>
<th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
<th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
<th data-field="treatmentPrice">Treatment price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Rhino plasty</td>
<td>range: $2000 to 3000$</td>
</tr>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Lift > Face lift</td>
<td>range: $2000 to 3000$</td>
</tr>
</tbody>
</table>but it is not working and do not change anything in my table, I also found that an error in my phpstorm about the function "detailFormatter"
not using in the page, but I use it as like as I explained above.
my actual result should be like this link : Example
function detailFormatter(index, row) {
var html = ;
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b>' + value + '</p>');
});
return html.join('');
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
<thead>
<tr>
<th data-field="checkboxselect" data-checkbox="true"></th>
<th data-field="id" data-width="40" data-halign="center">ID</th>
<th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
<th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
<th data-field="treatmentPrice">Treatment price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Rhino plasty</td>
<td>range: $2000 to 3000$</td>
</tr>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Lift > Face lift</td>
<td>range: $2000 to 3000$</td>
</tr>
</tbody>
</table>function detailFormatter(index, row) {
var html = ;
$.each(row, function(key, value) {
html.push('<p><b>' + key + ':</b>' + value + '</p>');
});
return html.join('');
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>
<table class="treat-table" id="table" data-detail-view="true" data-detail-formatter="detailFormatter" data-toggle="table" data-pagination="true" data-page-size="5" data-search="true" data-show-footer="false">
<thead>
<tr>
<th data-field="checkboxselect" data-checkbox="true"></th>
<th data-field="id" data-width="40" data-halign="center">ID</th>
<th data-sortable="true" data-width="150" data-field="category" data-searchable="true">Category</th>
<th data-field="treatmentName" data-width="200" data-searchable="true">Treatment Name</th>
<th data-field="treatmentPrice">Treatment price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Rhino plasty</td>
<td>range: $2000 to 3000$</td>
</tr>
<tr>
<td></td>
<td data-halign="center">2</td>
<td data-searchable="true">Plastic surgery</td>
<td data-searchable="true">Lift > Face lift</td>
<td>range: $2000 to 3000$</td>
</tr>
</tbody>
</table>jquery bootstrap-table
jquery bootstrap-table
asked Jan 18 at 20:14
Reza Reza
74
asked Jan 18 at 20:14
Reza Reza
74
edited Jan 19 at 8:56
Reza
asked Jan 18 at 20:14
Reza Reza
74
asked Jan 18 at 20:14
Reza Reza
74
asked Jan 18 at 20:14
Reza Reza
74
74
you forgot to include boostrap libs.
– gaetanoM
Jan 18 at 20:18
add a comment |
you forgot to include boostrap libs.
– gaetanoM
Jan 18 at 20:18
you forgot to include boostrap libs.
– gaetanoM
Jan 18 at 20:18
you forgot to include boostrap libs.
– gaetanoM
Jan 18 at 20:18
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54260836%2fdetail-view-during-using-bootstrap-table-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54260836%2fdetail-view-during-using-bootstrap-table-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you forgot to include boostrap libs.
– gaetanoM
Jan 18 at 20:18