I want to searching multicolumn value on the bootstrap table. There is any code for this
For example ;
https://datatables.net/examples/plug-ins/range_filtering.html
I want to searching like this but I could not find anything. I can post the data input on the server and write SQL query about LİKE . But it does not specific . Do have any example about it ?
Have a good day :)
My page screenshot
My table source code
<div class="table-responsive " style="height: 400px; overflow-y: auto;">
<table id="tablo_icin2" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
<span class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></span>
</th>
<th>User Name</th>
<th>Password</th>
</tr>
</thead>
<tr>
<td></th>
<td>Mark</th>
<td>123</th>
</tr>
</table>
</div>
You can make use of bootgrid as plugin for bootstrap.
http://www.jquery-bootgrid.com/Examples
Related
I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx
I have an HTML table which is built in the following way:-
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th> <th>Name</th> <th>Chamber</th> <th>District</th> <th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
Is it possible to create this table from javascript and in the HTML I just create a div and append the created table from javascript into this div. I tried placing the above content in a javascript variable and do an append but it did not work out. Is there a way to do this?? I think it did not work out may be because of the Angular JS variables. Correct me if I am wrong. I am pretty new to this.
In AngularJS use <div ng-bind-html="html-var"></div> and save the html-code in $scope.html-var.
For that you need to include <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
I need one help. I need the table value as per index after filtration using Angular.js. I am explaining my code below.
index.html:
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Name :</span>
<input class="form-control" placeholder="Name" name="name" type="text" ng-model="search.shipping_name">
<input type="button" class="btn btn-success" ng-click="addProductViewData();" id="addProfileData" value="Import"/>
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<thead>
<tr>
<th>Sl. No</th>
<th>Name</th>
<th> Product Name</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr dir-paginate="pro in orderDataList | filter:search |itemsPerPage:5 track by $index">
<td>{{$index+1}}</td>
<td>{{pro.shipping_name}}</td>
<td>{{pro.product_name}}</td>
</tr>
</tbody>
</table>
In the above code you can see I have one search field and one button above of the table. Here I need suppose user typed one name and filtered value display inside the table. When user will click on that button all filtered data will fetch in JSON format inside controller page. Please help me.
"DataTables warning: table id=dataTables-example- Requested unknown parameter '0' for row 1."
I know there are a lot of similar answers available on google, but most of them uses JSON and well, I don't. I know parameter '0' is referring to the event ID, can anyone enlighten me on where to change?
I have a class named "TrialEvent", a servlet named "EventRetrieveServlet" and Session Bean.
The below are the codes in my jsp.
<form method="get" action="EventRetrieveServlet">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover"
id="dataTables-example">
<thead>
<tr>
<th>Event Ref.</th>
<th>Image</th>
<th>Date</th>
<th>Start</th>
<th>End</th>
<th>Target Percentage (%)</th>
<th>View Coordinate</th>
</tr>
</thead>
<tbody>
<c:forEach var="rEvent" items="${eventList}" varStatus="i">
<tr>
<td>${rEvent.getIdtrialevent()}</td>
<td><img
src='displayImage?image=${rEvent.getTrialImage().getImageURL()}'
height=80px, width=100px></td>
<td>${rEvent.getDate()}</td>
<td>${rEvent.getStart()}</td>
<td>${rEvent.getEnd()}</td>
<td>${rEvent.getTargetperc()}</td>
<td><a href="javascript:void(0)"
onclick="ShowNewPage(${rEvent.getAreacoords().getCoordsID()})"><img
src="assets/img/view.png" height=20px width=20px></a></td>
<tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</form>
Here's my javascript
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable(
);
});
</script>
I'm trying to get paging to work, but i suspect this error is preventing the paging from working.
You are not closing correctly the <tr> tag before </c:forEach>.
I have a nested table column like:
Now I want to hide mark columns by table column index. How is it possible? Please provide concept not solution. I have confused how to start my task.
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">{{ customerOrder.orderNo }}</th>
<th style="width: 50%;">{{ customerOrder.date }}</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Try this:
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
Here is the 'concept' only to hide the column using index like you asked:
To hide the column by index, you could use CSS with :nth-child pseudo class. For example: td:nth-child(5). #5 would be which ever index you want to use. Please see this link for more details/explanation if you haven't used nth-child before: http://css-tricks.com/almanac/selectors/n/nth-child (I recommend looking at the example how to "select the third child element of the second element".
If you want to hide the column by index with a trigger event, I would use the javascript approach that Rudra has mentioned. For example, add a class to the html tag you wish to hide and blind it with an event to do the hiding, or alternatively you could bind it to an id.
Here you can use javascript to hide columns you want to hide.
But you need some event to hide and show columns you need.
Below i have added a class x to the table that contains your columns to be hidden.
<head>
<style>
.x
{
display:none;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">1</td>
<td style="width: 20%;">1</td>
<td style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">1</th>
<th style="width: 50%;">1</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Now if you want to toggle between hide and show you can do it by changing css through javascript(this part is optional if you want),but for that you require a event or you can do it document.ready method too.
for example
I suppose you have a button having id='slidingcolumns'.
$(document).ready(function(){
$('#slidingcolumns').click(function(){
$(".x").slideToggle();
});
});
I hope this might help you
good luck