I have a table where I have added one button on each row and it was working fine.
Now I want that table to be searchable and sortable. For that I added the attribute data-toogle=table and the corresponding data-search=”true” (on table level) and data-sortable=”true” (on row level). The problem is that sort and search do not work if I do not add data-toogle=table, and when add it, buttons stop working.
Just removing the data-toogle=table, buttons work again, but table is not searchable and sortable anymore.
The script for the action of the button (“moreButton”) is at the end part of the script.
My script including data-toogle=table (search and sort working but buttons don´t):
<table class="table table-hover table-striped" id="expedientes" data-search="true" data-toggle="table">
<!--Cabecera tabla-->
<thead>
<tr class="h5">
<th style="text-align:center;" scope="col" data-sortable="true">BP</th>
<th style="text-align:center;" data-sortable="true">Creation Date</th>
<th style="text-align:center;" data-sortable="true">Last Update Date</th>
<th style="text-align:center;" data-sortable="true">Due Date</th>
<th style="text-align:center;" data-sortable="true">Escalation Level</th>
<th style="text-align:center;" data-sortable="true">Communication Status</th>
<th style="text-align:center;" data-sortable="true">Action Pending</th>
<th style="text-align:center;" data-sortable="true">Reopen?</th>
<th style="text-align:center;" data-sortable="true" class="summarizedHead">Details</th>
<th style="text-align:center;">+</th>
</tr>
</thead>
<tbody>
<script>
var escalationNumber = 0;
var messageNumber = 0;
var currentEscalation = -1;
var currentMessage = 0;
</script>
<c:forEach items="${toDoList}" var="toDo" varStatus="parametros">
<tr>
<td style="text-align:center;">${toDo.bpKey}</td>
<td style="text-align:center;">${toDo.date}</td>
<td style="text-align:center;">${toDo.lastMessage.messageDateStringJsp}</td>
<td style="text-align:center;">${toDo.dueDateCpl}</td>
<td style="text-align:center;">${toDo.escalationStatus}</td>
<td style="text-align:center;">${toDo.communicationStatus}</td>
<td style="text-align:center;" class="isActionPending"></td>
<td style="text-align:center;"><button class="hideableActionButton">Reopen To-Do</button></td>
<td style="text-align:center;"><div class="summarized"> ${toDo.lastMessage.detail}</div></td>
<td style="text-align:center;"><button type="button" id="moreButton2" class="moreButton2" aria-pressed="false">More</button></td>
<script>
$(".isActionPending").each(function(){
if("${toDo.lastMessage.action}" == "PENDING"){
$(this).html("Yes");
}else{
$(this).html("No");
}
$(this).removeClass("isActionPending");
});
$(".hideableActionButton").each(function(){
$(this).hide();
if($(this).attr("id")==null){
var hideButtonID = "ActionButton" + escalationNumber;
$(this).attr("id",hideButtonID);
$(this).removeClass("hideableActionButton");
$(this).click(function (e){
setResponseReopen($(this).attr("id"))
clickedReopen();
$("#dialog").dialog("open");
});
}
if("${toDo.lastMessage.action}" == "CLOSE"){
$(this).show();
}else{
$(this).hide();
}
});
</script>
</tr>
<tr class="secondaryTable" style="display">
<td colspan="9">
<table class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Owner</th>
<th>Details</th>
<th>Actions</th>
<th>Attachments Link</th>
</tr>
</thead>
<tbody>
<c:forEach items="${toDo.messages}" var="escalationMessage" varStatus="parametros">
<tr>
<td>${escalationMessage.messageDateStringJsp}</td>
<td>${escalationMessage.owner}</td>
<td>${escalationMessage.detail}</td>
<td><button class="respondButton">Actions</button></td>
<td class="attachment"></td>
<script>
$(".respondButton").each(function(){
$(this).hide();
if($(this).attr("id") == null){
buttonID = "respondButton"+escalationNumber+"-"+messageNumber;
//$(this).hide();
$(this).attr("id",buttonID);
$(this).removeClass("respondButton");
if(${escalationMessage.canBeResponded}){
$(this).show();
$(this).click(function (e){
setResponseData($(this).attr("id"))
clickedRespond();
$("#dialog").dialog("open");
});
}
}
});
$(".attachment").each(function(){
var attachmentLink = "${escalationMessage.attachLink}";
if(attachmentLink != ""){
$(this).append("<a href='"+attachmentLink+"' target='_blank'><img class='linkIcon' src='../../../pictures/link.png'/></a>");
}
$(this).removeClass("attachment");
});
messageNumber++;
</script>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
<script>
escalationNumber++;
</script>
</c:forEach>
</tbody>
</table>
</div>
<%@ include file="sendMessage.jsp"%>
<%@ include file="confirmToDo.jsp"%>
<script>
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true,
width:700
});
$("#dialogConfirm").dialog({
autoOpen: false,
modal: true,
width:700
});
})
if(${pendingRequests}){
$("#hideableNotification").show();
}else{
$("#hideableNotification").hide();
}
var buttonNumber = 0;
var tableNumber = 0;
$(".secondaryTable").each(function(){
$(this).attr('id', 'table' + tableNumber);
tableNumber++;
$(this).hide();
});
$(".moreButton").each(function(){
$(this).attr('id', 'button' + buttonNumber);
$(this).click(function(e){
var id = $(this).attr('id')
var index =parseInt(id.replace("button",""));
if($(this).text()=="More"){
reset();
$("#table"+index).show();
}else{
$("#table"+index).hide();
}
$(this).text($(this).text() == "More" ? "Less" : "More");
});
buttonNumber++;
});
function reset(){
$(".secondaryTable").each(function(){
$(this).hide();
});
$(".moreButton").each(function(){
$(this).text("More");
})
}
function setResponseData(buttonID){
var indices =buttonID.replace("respondButton","");
indices = indices.split("-");
currentEscalation =parseInt(indices[0]);
currentMessage = parseInt(indices[1]);
}
function setResponseReopen(buttonID){
var index =buttonID.replace("ActionButton","");
currentEscalation =parseInt(index);
}
</script>
<%@ include file="../common/footer.jspf"%>
New contributor
Enrique Martín Hernández is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.