Can someone help me setup the Checkboxes extension for Datatables to start with some some checkboxes checked? The documentation on this matter can be found here, and although I've done everything that's required, it still fails to do what's supposed to do.
Basically I'm passing an array of the IDs that I want to be checked upon pageload, and I'm checking the ID of each row to check if it's contained in the array, but still all rows start unchecked.
jQuery(function($) {
$('#questions-pool').DataTable({
ordering: false,
dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
lengthMenu: [
[10, 50, 100, -1],
[10, 50, 100, 'All']
],
initComplete: function(settings) {
var api = this.api();
var selected = [387, 386, 385, 384, 383, 382, 381, 380, 379, 378];
alert(selected);
api.cells(
api.rows(function(idx, data, node) {
alert(data[2]);
return (selected.indexOf(data[2]) >= 0) ? true : false;
}).indexes(),
0
).checkboxes.select();
},
columnDefs: [{
targets: 2,
checkboxes: {
selectAllPages: false,
}
}],
});
});
You can find a working fiddle here. Everything is working fine, except for the desired rows selection at startup.
Any help will be greatly appreciated. I'm struggling with this for 2 days already...
So there were two issues (and bare with me since I don't even know jQuery nor any of the packages you were using).
The first is that the selected-list contain numbers while the data from the DOM your comparing to contain strings. Which means that they will never match.
The second thing was this piece:
columnDefs: [{
targets: 2,
checkboxes: {
selectAllPages: false,
}
}],
I changed it to
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
because that's what the working example you passed used, and... I have no idea why but now it works, here's a working jsfiddle :)
https://jsfiddle.net/2y5hx1a4/12/
EDIT: Oh and a tip, it's way easier (imo) to debug using console.log("what you want to check") than alert :P
Related
This is my code for the date table
var table = $('.MyNumbersTable').DataTable({
"lengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
"aaSorting": [],
"language": {
"zeroRecords": "You don't have any numbers."
}
});
The issue is when there are records in my numbers table it displays records, It is fine.
But when if there is no record in table it show '1' as record instead of display message.
Please see notes regarding language.zeroRecords:
https://datatables.net/reference/option/language.zeroRecords
Note that language.emptyTable is shown when there is simply no
information in the table at all (regardless of filtering), while this
parameter is used for when the table is empty due to filtering.
It seems you may wish to use language.emptyTable : https://datatables.net/reference/option/language.emptyTable
Hello i am setting up my first DataTable and i like it very much. Everything works perfect except the All choice in te Show Entries dropdown. It show's nothing when i choose that (No matching records found) The other numbers do work perfectly.
I use this code:
$(document).ready(function(){
$('#empTable').DataTable({
aLengthMenu: [
[25, 50, 100, 200, -1],
[25, 50, 100, 200, "All"]
],
'processing': true,
'serverSide': true,
'serverMethod': 'post',
'ajax': {
'url':'ajaxfile.php'
},
'columns': [
{ data: 'last_name' },
{ data: 'email' },
{ data: 'gender' },
{ data: 'first_name' },
{ data: 'city' },
],
dom: 'lBfrtip',
buttons: [
'csv', 'excel', 'pdf','print'
],
});
});
Under ajaxfile.php you have used a limit() for limiting the record and that get the values like 25, 50, 100, 200, but for All it value is -1 means the query is like:
.... limit(-1);
That's why it is showing No matching records found.
Make some changes in your logic so that when you get All i.e. -1 as limit parameter, don't use the limit() in that case and fetch all records otherwise use it.
Try this, it will resolve the issue.
I'm currently using free-jqGrid version 4.14.1 (using cdn hyperlink). I would like to let the users add a new row with their input values, and edit the row if they want to make any change by clicking the row. For adding new row, I created an adding button (not using jqGrid pager).
I'm now facing two different issues:
1) I refered this demo for inline editting. According to this demo code, I need to use the line
grid.jqGrid('restoreRow', lastSelection);
However, with this line, everytime I am adding new row, the previous row is deleted and only newly added row is displayed. Please check this fiddle.
2) Due to 1), I commented out that line(I don't think I supposed to do that for proper functioning), and tried to run. The previously added rows remain after adding new row, but all rows displayed is showing in textbox like this(fiddle):
What I would like to have is only after user clicks the row to modify, it changes to the textboxes like the guriddo demo.
I have not found any post related to this issues. Is there anyone please help me??
============================================
Add:
I started with some base table value just for verification. The base data rows were functioning as I wanted (click the row for modification), but the new rows were not. It seems like new rows are not selected and not focused when I click, and not exiting the edit mode after hitting enter key..
============================================
============================================
The below is the code of grid just for reference:
$(document).ready(function () {
Load_Bin();
$('#Bin-QtyBin').focus();
$('#btnEnter-Bin').click(function () {
var valNumBin = $('#Bin-numBin').val();
//if bins are dropbox: select enabled one
var valQtyBin = $('#Bin-QtyBin').val();
var paramRow = {
rowId: "new_row",
initdata: {
numBin: valNumBin,
QtyPutAway: valQtyBin
},
position: "first" //"last"
}
$("#tbBin").jqGrid('addRow', paramRow);
$('#Bin-numBin').val('');
$('#Bin-QtyBin').val('');
});
});
var lastSelection;
function Load_Bin() {
var tbBinArea = $('#tbBin');
tbBinArea.jqGrid({
datatype: "local",
colModel: [
{ label: 'Bin', name: 'numBin', sorttype: 'text', searchoptions: { clearSearch: true }, width: 310, editable: true },
{ label: 'Put Away Qty.', name: 'QtyPutAway', sorttype: 'number', searchoptions: { clearSearch: true }, width: 310, editable: true }],
rowNum: 10,
rowList: [10, 15, 30, "10000:All"],
prmNames: {
page: 'defaultPageNumber',
rows: 'rowsPerPage'
},
//forceClientSorting: true,
rownumbers: true,
//autowidth: true,
viewrecords: true,
loadonce: true,
multiselect: false,
multiPageSelection: false,
iconSet: "fontAwesome",
pager: true,
height: 250,
onSelectRow: editRow,
searching: {
searchOperators: true,
defaultSearch: 'cn',
closeOnEscape: true,
searchOnEnter: false,
multipleSearch: true
}
});
}
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#tbBin");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true });
lastSelection = id;
}
};
(p.s. thanks to the owner of this fiddle since I was struggling to move the code to fiddle, and sorry for not addressing him/her since I lost the original answer link for that fiddle... )
I ended up just reload the whole grid after adding new row. It works fine, except that newly added line does not turn to edit mode since it doesn't detect whether user clicks it or not since it is already highlighted when it was created..
After creating new row, just added this code:
var reloaddata = $('#tbBin').jqGrid("getGridParam", "data");
$('#tbBin')
.jqGrid('setGridParam',
{
datatype: 'local',
data: reloaddata
})
.trigger("reloadGrid");
This is a basic datatables fiddle.
This is the default and the dropdowns will show the follwoing Show options 10, 25, 50, 75 and 100 records:
Now what I would like to get working is the "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ] which I can in this fiddle. But what if I use server side processing, this is where the All option does not work for me. The others do. When I select All it dispalys the data that it was showing and the at the bottom says No data found in the server
As far as i Know the only difference is the data comes from the server. Can anyone advise how i can trouble shoot this? As far as I can tell when I select All I am sending length:-1 and for 10 it is length:10 so not sure why All is not working
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"lengthMenu" : [[ 10, 25, 50, -1 ],[ '10', '25', '50', 'All' ]],
//"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
}
} );
} );
When using server-side processing, you should ignore the start and length request parameters ONLY IF the length parameters is -1 in your PHP script in order to return all records.
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
1)Means that "ALL" is assigned the value of -1.
2)that's the reason why when u select All your are sending length:-1 and for 10 it is length:10
3)that's the reason why you also get No data found in the server - error
4)to proper this give this in your Controller
var length = Request.Form.GetValues("length").FirstOrDefault() == "-1" ? Convert.ToString(YOUR_LIST.Count()) : Request.Form.GetValues("length").FirstOrDefault();
5)this will tell if length == -1 then take your list total count so that it displays all rows .
For me, changing the 1st 3 of these parameters worked :
dom: 'ZBlrtip',
lengthMenu: [[100, 200, -1], [100, 200, "All"]],
bLengthChange: true,
order: [8, "desc"],
paging: true,
pageLength: 100,
serverSide: true
I am using jquery datatable plugin for pagination with server side processing. The page is loading fine with data. But if entering some text in search-box, it is giving 'TypeError: b is undefined'. This happens only if the number of rows is less than the page length. For example, if page length is 10 and number of rows in the result set is 11, then it would not throw any error, but if it is 9 then it will throw error. I am using the latest version of jquery and datatable plugins
Below is my code
$('#example').dataTable({
"iDisplayLength": 100,
"pageLength": 100,
"lengthMenu": [ 10, 25, 50, 100, 500],
"bProcessing": true,
"serverSide": true,
"ajax": {
"url": "/admincp/exportdata/branch",
"type": "POST",
"cache" : false,
"headers": { "cache-control": "no-cache" }
},
"columns": [
{ "data": "code" },
{ "data": "name" },
{ "data": "action" }
]
})
any help is appreciated.
This issue is solved as follows
Add additional empty rows to original rows so that number of rows equal to page length. This makes the number of rows to display and page length are always equal.
This will display empty rows. To avoid that, add a class to empty rows using 'DT_RowClass' property and make it hidden in css file