So, I have a DataTable with left fixed column but wanted to add a Select like filter, which is not supported by datatables.
I created the select filter and it works just fine withouth the fixed column as it filters from the original table. The thing is when I fix the left column, it doesn't apply the filter into the cloned table
I've tried adding and 'id' into the cloned table and then applying the filter into it too, but it won't work
As it is seen in the picture, the filter 'Externas' it's applied and should only show the orange rows, but the fixed columns shows every row
Fixed column not filtering
This is my select
<select id="filtrarTipo" onclick="filtradoTipo(); filtradoTipoC();">
<option value="" selected disabled>Seleccione</option>
<option value="">Todas</option>
<option value="Interna">Interna</option>
<option value="Externa">Externa</option>
</select>
And my jquery
function filtradoTipo() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("filtrarTipo");
filter = input.value.toUpperCase();
table = document.getElementById("dtBecas");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Related
I followed the recommendations I found here
jQuery(document).ready(function($) {
jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
return this.flatten().reduce( function ( a, b ) {
if ( typeof a === 'string' ) {
a = a.replace(/[^\d.-]/g, '') * 1;
}
if ( typeof b === 'string' ) {
b = b.replace(/[^\d.-]/g, '') * 1;
}
return a + b;
}, 0 );
} );
$("#crudTable tfoot").css("display", "table-footer-group");
crud.table.on("draw.dt", function ( row, data, start, end, display ) {
total = crud.table.rows( function ( idx, data, node ) {
return data[11].includes('Cancelado') ? false : true;} ).data().pluck(10).sum();
total = "$" + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
$("#crudTable tfoot tr th").html(
" <br> "
);
$("#crudTable tfoot tr").children().eq(10).html(
"Total <br>"+ total
);
});
});
And I added some modifications to get the total of the column by skipping the items that have canceled status, but I have not been able to get the total of the records but without paging. With Datatable I get the records that are being drawn, but I can't find how to intercept the ajax query or modify it to get the full total on that column including filter modifications.
Currently if in the pagination I request "show all records" obviously I get the value I need. But the requirement is that this value is displayed even if the table is visually paginated.
one way to achieve that would be to overwrite the search() function of the ListOperation (it's the table ajax endpoint).
You would need do do the full query without the pagination part to get the full data, and then pass the calculation along with the paginated response for display.
Cheers
I've multiple Select tags in HTML form i.e 'Gender', 'District' etc where the default selection is All. The eloquent query is dependent on these tags. I can retrieve data from DB if user select an option like Male or Female but don't know how to use `All'.
here is html code of Gender Select tag.
<div class="col-md-2">
<label for="gender">Gender</label>
<select wire:model="byGender" class="custom-select form-control" name="gender" id="gender">
<option selected>All</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="combine">Combine</option>
</select>
</div>
and here is Laravel Code
public function mount()
{
$this->rows = DutySheet::where('gender', $this->byGender)->get()->toArray();
}
Note: this is Livewire function and byGender will be updated as the user select an option.
My question is what to use as value of All option in Select tag to retrieve all data from DB, "" is not working.
Your All options are represented by empty values (empty strings). You can leverage this by using the when() method on the query-builder, which effectively is an if-statement - the closure is only applied to the querybuilder if the first parameter is true.
$this->rows = DutySheet::when($this->byGender !== '', function($query) {
return $query->where('gender', $this->byGender)
})
->get()
->toArray();
You can chain these and add as many when() as you want to your query, to compute a more complex query with conditional conditionals.
You can add some logic to only apply the where condition when the select menu is set to any value other than "All".
If the user selects male, female or combine then the where condition will be run against that value, otherwise the query will return every record.
public function mount()
{
$dutySheets = DutySheet::query();
if ($this->byGender !== 'All') {
$dutySheets->where('gender', $this->byGender);
}
$this->rows = $dutySheets->get()->toArray();
}
I am trying to get default value selected (from database) in my select box using ng-options.
My view
<select class="form-control samlength modalinput"
ng-options="p.procid as p.procname for p in processes track by p.procid"
ng-model="p.procid">
<option value="">-- choose an option --</option>
</select>
where p.procid is a value received from the database.
My data
procid procname time
1 MyProcess 2018-05-30 13:34:54.097 3003162
3 Testing 2018-05-31 18:31:32.467 3003162
If selected procid is 3, how can I get it to be selected by default?
FYI - I have tried multiple answers given in other threads. I have also tried ng-init but nothing helped.
You can keep your HTML as:
<select class="form-control samlength modalinput"
ng-options="p.procid as p.procname for p in processes track by p.procid"
ng-model="selectedProcess">
<option value="">-- choose an option --</option>
</select>
Now if we have a requirement to select a particular object in the array. We can do that by iterating through the array and comparing value at the given key:
function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
for (var i = 0; i < arraytosearch.length; i++) {
if (arraytosearch[i][key] == valuetosearch) {
return i;
}
}
return null;
}
Call this function as:
var index = functiontofindIndexByKeyValue($scope.processes, "procid", procid);
$scope.selectedProcess = $scope.processes[index];
alert(index);
Hope it works!
Update your html code to this:
<select ng-model="processSelected"
ng-options="p.procname for p in processes track by p.procid">
</select>
Then in controller initialise your model value as:
$scope.processSelected = $scope.processes[1];
Where $scope.processes is an array of process objects.
Plunker Example
I came across with this issue during my work process and couldn't find any logical solution.
Firstly, I have two dropdown menus. One for countries, other for cities. As Materialize converts select element into ul, thus I have two ul-s instead.
<select name="res_country" id="res_country">
<option selected="" disabled="">Ölkə</option>
<?php
foreach ($countries as $country) {
print "<option value='".$country['id']."'> ".$country["text"]."</option>";
}
?>
</select>
<select name="res_city" id="res_city">
<option selected="" disabled="">Şəhər</option>
<?php
foreach ($cities as $city) {
print "<option parent=".$city['country_id']." value=".$city['id'].">".$city['text']."</option>" ;
}
?>
</select>
I wanted to dynamically set options of second dropdown according to which country I selected in the first one.
Yes, I have already read about that I should firstly destroy and then create dropdowns after modifiying them. But this didn't work.
I fixed this problem by writing below code in JS.
$('#res_country') stands for first dropdown with countries, $('#res_city') for the second with cities.
$('#res_country').on('change',function () {
var country_id = $('#res_country option:selected').val();
var indexes = [];
//
$('#res_city option').each(function()
{
if($(this).attr('parent') == country_id){
var val = $('#res_city option').index($(this));
indexes.push(val);
}
});
console.log(indexes);
$('#res_city').prev().children().hide();
for(var i=0; i<indexes.length; i++){
$('#res_city').prev().children().eq(indexes[i]).show();
}
});
But I am not satisfied with such solution. I wonder if any of you had similar situation?
So I am deeply confused. I have two tables, one is locations assignments which consists of: location id, type and type id. I also have a table called services, which consists of name, id , description and icon.
The idea is to say, get me back all 13 services, from that we create 13 checkboxes. then we say, check the location assignments table, if this services (based on type, id and location id) matches a service in that list, check the checkbox, else leave it unchecked.
What I ahve so far is:
public static IEnumerable<Constants.Assignable> getAllService(int id)
{
List<Constants.Assignable> assign = new List<Constants.Assignable>();
using (var db = new Context())
{
var serv = from s in db.Services
join la in db.LocationAssignments on s.id equals la.typeId into LocationAssignments
from la in LocationAssignments
where la.locationId == id && s.id == la.typeId && la.type == Constants.SERV
select s;
foreach(var s in serv)
{
assign.Add(new Constants.Assignable(){
id = s.id, name = s.name
});
}
return assign;
}
}
which returns me, currently, two services, when it should return me 13. So there is something wrong with my join.
from there we do:
<h3 class="muted">Services Nearby</h3>
IEnumerable<UFA.Location.Core.Constants.Assignable> ServicesNearby = UFALocationApp.Helpers.LocationHelper.QueryHelper.getAllServicesNearby(Model.id);
foreach (var servicenb in ServicesNearby)
{
<div class="control-group">
<label class="control-label" for="serviceNearBy">
#servicenb.name
</label>
<div class="controls">
<input type="checkbox" id="Locationservice" value="#servicenb.id" name="serviceNB" checked="#(servicenb.assigned ? "checked" : "")" />
</div>
</div>
}
which prints out the two check boxes that are, in this case checked. there should be 11 more that are unchecked.
What do I have to change in my query to say: get me all services and only check off the ones associated with this location?
To make it a LEFT JOIN, you need to use DefaultIfEmpty(), it seems that the component you're missing to make this work;
var serv = from s in db.Services
join la in db.LocationAssignments on s.id equals la.typeId
into LocationAssignments
from la in LocationAssignments.DefaultIfEmpty()
where la.locationId == id && s.id == la.typeId
&& la.type == Constants.SERV
select s;
If I read you well you're after something like this:
var assign = (from s in db.Services
select new Constants.Assignable
{
id = s.id,
name = s.name,
checked= db.LocationAssignments.Any(la => la.typeId == s.id)
}).ToList();
Now you can change the value of checked by clicking the checkbox and process the changes when you post back.