I'm trying a very simple jquery bootgrid table with caption attribute to make the header sticky while scrolling.
<table id="grid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th caption="ID" data-column-id="id" data-type="numeric"></th>
<th caption="Sender" data-column-id="sender"></th>
<th caption="Received" data-column-id="received" data-order="desc"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
After the data binding the rendered table looks like below, and the data binding is fine.
<table id="grid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric"></th>
<th data-column-id="sender"></th>
<th data-column-id="received" data-order="desc"></th>
</tr>
</thead>
<tbody>data rows goes here.
</tbody>
</table>
Any suggestion, how I can tell jquery-bootgrid, to stop removing the caption attribute ?
Thanks a lot.
Finally I figured out this and it is fixed.
In jquery.bootgrid.js file, locate the loadColumns method and include the caption attribute as mentioned below.
Step 1: Change in loadColumns() method
function loadColumns()
{
var that = this,
firstHeadRow = this.element.find("thead > tr").first(),
sorted = false;
/*jshint -W018*/
firstHeadRow.children().each(function ()
{
var $this = $(this),
data = $this.data(),
column = {
caption: $this[0].attributes.caption.value,//Find better way
id: data.columnId,
....
...
}
Step 2 : Changes in renderTableHeader() method
function renderTableHeader()
{ ....
....
$.each(this.columns, function (index, column)
{
if (column.visible)
{
//console.log(column.caption);
var sortOrder = that.sortDictionary[column.id],
iconCss = ((sorting && sortOrder && sortOrder === "asc") ? css.iconUp :
(sorting && sortOrder && sortOrder === "desc") ? css.iconDown : ""),
icon = tpl.icon.resolve(getParams.call(that, { iconCss: iconCss })),
align = column.headerAlign,
cssClass = (column.headerCssClass.length > 0) ? " " + column.headerCssClass : "",
caption = column.caption; //caption passed to template
....
.... }
Step 3: Changes in the headercell template.
Locate this headercell variable and add the caption attribute in the template.
headerCell: "<th data-column-id=\"{{ctx.column.id}}\" caption=\"{{ctx.column.caption}}\" class=\"{{ctx.css}}\" style=\"{{ctx.style}}\"><span class=\"{{css.columnHeaderText}}\">{{ctx.column.text}}</span>{{ctx.icon}}</th>",
Hope this helps someone.
Related
I want to filter the data and managed to do it. However, when I clicked filter, my datatable headers are missing but I couldnt figure out what the problem is.
My blade is:
<table id="table_data" class=" table-responsive table-striped table-hover table-bordered ">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
</table>
Filter function:
$('#filter').click(function(){
var table = $('#table_data').DataTable();
var name= $('#name').val();
var age= $('#age').val();
var gender= $('#gender').val();
if( $.fn.DataTable.isDataTable('#table_data')){
table.destroy();
$('#table_data').empty();
var dataTable = $('#table_data').DataTable({
processing: false,
serverSide: false,
ajax:{
url:'/filter-result',
data:{name:name, age:age,gender:gender}
},
columns: [
{
data:'id',
name:'id'
},
{
data:'First_name',
name:'First_name'
},
{
data:'Last_name',
name:'Last_name'
}
]
});
}
});
What is the reasons the header missing after clicked?
I actually have projects and modules table. When i click button,
i want to get the data from model of that specific project.
Here is my code :
this is my table where i want to show the data of modules that represent specific project.
<table class="report">
<tr>
<th class="report-th"> Module ID </th>
<th class="report-th"> Module Name </th>
<th class="report-th"> Module Status </th>
</tr>
#if($modules->where('project_id','=',$project->id))
#foreach($modules as $module)
<tr>
<td>{{$module->id}}</td>
<td>{{$module->title}}</td>
<td>{{$module->status}}</td>
</tr>
#endforeach
#endif
</table>
below is the code in controller:
public function show()
{
$sortBy = 'id';
$sortDirection = 'ASC';
if (request('sortby') || request('sortdir')) {
$sortBy = request('sortby');
$sortDirection = request('sortdir');
}
$projects = projects::orderBy($sortBy, $sortDirection)->paginate(6);
$modules= modules::all();
return view('tms.projects', compact('projects','modules'));
}
I want to send array of id's to backend with one button from vuejs table but i get error 500.
Logic
Check the check boxes
Collect the id's
Send id's to back-end when click on button
update the view
Code
template
<table class="table table-dark table-hover table-bordered table-striped">
<thead>
<tr>
<th class="text-center" width="50">
//the button
<button class="btn btn-outline-danger" #click="withdraw(index)">Withdraw</button>
</th>
<th class="text-center" width="50">#</th>
<th class="text-center">Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="(income,index) in incomes" v-bind:key="index">
<td class="text-center">
//check box input
<input v-if="income.withdraw == '0'" type="checkbox" :id="income.id" :value="income.amount" v-model="checkedNumbers">
</td>
<td class="text-center">{{index+1}}</td>
<td class="text-center">Rp. {{formatPrice(income.amount)}}</td>
</tr>
<tr>
<td colspan="2"></td>
<td>
<span>Withdraw for today, Sum: <br> Rp. {{ formatPrice(sum) }}</span>
</td>
</tr>
</tbody>
</table>
script
export default {
data() {
return {
incomes: [],
checkedNumbers: [],
}
},
computed: {
sum() {
return this.checkedNumbers.reduce(function (a, b) {
return parseInt(a) + parseInt(b);
}, 0);
}
},
methods: {
withdraw(index) {
let checkedids = this.incomes[index]
axios.post(`/api/withdrawbutton/`+checkedids).then(response => {
this.income[index].withdraw = '1'
this.$forceUpdate()
});
}
}
}
route
Route::post('withdrawbutton/{id}', 'IncomeController#withdrawbutton');
controller
public function withdrawbutton($id)
{
$dowithdraw = Income::where('id', $id)->get();
$dowithdraw->withdraw = '1';
$dowithdraw->save();
return response()->json($dowithdraw,200);
}
Any idea where is my mistake and how to fix it?
......................................................................................................................
Don't send the list as a GET parameter, send it as a POST:
let params = {}
params.ids = this.checkedNumbers
axios.post(`/api/withdrawbutton/`, params)
.then(response => {
this.income[index].withdraw = '1'
this.$forceUpdate()
});
Controller
public function withdrawbutton(Request $request)
{
$dowithdraws = Income::whereIn('id', $request->input('ids', []));
$dowithdraws->update(['withdraw' => '1']);
return response()->json($dowithdraws->get(), 200);
}
Route
Route::post('withdrawbutton/', 'IncomeController#withdrawbutton');
And I don't think you need to update anything in the front because you already have them checked (if you want to keep them checked)
I am working on Laravel Datatables using Yajra .
I am trying to populate the table by passing the array value.
My table structure is as follows:
<table id="daily_datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Country</th>
<th rowspan="2">No of accounts</th>
<th rowspan="2">Bank Account Pending</th>
</tr>
</thead>
My jquery call is as follows:
$('#daily_datatable').DataTable({
processing:true,
serverSide:true,
rowReorder: true,
ajax:
{
url:"{!! URL::to('dailyreportDatatable') !!}"
},
dom: 'Bfrtip',
buttons: ['pageLength','csv','excel', 'pdf'],
columns:[
{data:'region',name:'region'},
{data:'country',name:'country'},
{data:'noofaccounts',name:'noofaccounts'},
{data:'accountpending',name:'accountpending'},
]
});
My controller method is as follows:
public function dailydatatable(){
$final = new Collection;
$from_date = date("Y-m-d");
$to_date = date("Y-m-d");
$pastfrom_date = date("Y-m-d", strtotime("-2 days"));
$pastto_date = date("Y-m-d", strtotime("-2 days"));
$country = AccMaster::select('ms_region','ms_country','ms_bacc_num')->groupby('ms_country')->get()->toArray();
foreach($country as $countryCode){
$pending = AccMaster::select('ms_bacc_num')->where('ms_country',$countryCode['ms_country'])->get()->toArray();
$bankacc = $this->getBankAcc($pending);
$final->push([
'region'=>$countryCode['ms_region'],
'country'=>$countryCode['ms_country'],
'noofaccounts'=>$this->getAccounts($countryCode['ms_country']),
'accountpending'=>$this->getAccPending($countryCode['ms_country'],$bankacc),
]);
}
return Datatables::of($final)->make(true);
}
I am not able to draw the datatable. I get the error
jquery.dataTables.min.js:31 Uncaught TypeError: Cannot set property
'0' of undefined
you need to rewrite your html table because you forget end tr tag
<table id="daily_datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Country</th>
<th rowspan="2">No of accounts</th>
<th rowspan="2">Bank Account Pending</th>
</tr>
</thead>
There is a way to make visible a <br> inside a cell using jquery-bootgrid? Because the render of <br> is not visible.
What I understand is that you want to add a line break in your data, something like this,
In the features column I am passing an array and it displays each Item in a separate row using <br>
For this you can create a custom converter,
http://www.jquery-bootgrid.com/Documentation#converters
You can create the converter when initializing the BootGrid Table
var dt = $('#myTable').bootgrid({
//.......... Other Options
converters: {
listDisplay: {
from: function(value) {
return value;
},
to: function(value) {
// Here you can customise value - I have an Array which I join using <br>
value.sort();
value = value.join("<br/>");
return value;
}
}
}
});
Then all you have to do in the Table HTML is set the data-type on the Column heading
<table id="myTable">
<thead>
<tr>
<th data-column-id="Id" data-visible="false" data-identifier="true" data-type="numeric">Id</th>
<th data-column-id="SelectedFeaturesNames" data-type="listDisplay">Features</th>
<!-- Note the data-type on the Features <th> is listDisplay -->
</tr>
</thead>
<tbody></tbody>
</table>
Did it work using that method?
Yes #Dawood Awan ! It worked for me
PHP:
<td>
<?php
$test = ['b', 'a', 'c'];
echo json_encode($test);
?>
</td>
JS:
to: function(value) {
value = JSON.parse(value); //convert received json to js array.
value.sort();
value = value.join("<br/>");
return value;
}