I have a form. After submission the data is sent to database.
I want to show all submissions details in dashboard with dataTables.js, What how it looks like.
table = $('#entries').DataTable({
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
data: data_table,
aoColumnDefs: [{ aTargets: -1, bSortable: false, bSearchable: false}],
"aaSorting": [[0,'desc']],
columns: Submissions.data_columns,
createdRow:function(row,data,dataIndex){
console.log(subId);
for(i=0; i<subId.length; i++){
$(row).attr("subId",subId[i]);
}
}
});
subId is an array where i have submissions' Ids of the form. Is there a way that I could use to add subId's to each row?
Related
I have the following js code to initialize a DataTable:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
What I'm currently failing to figure out is, how do I now define further settings other than the buttons as an additional argument? I would for example like to define the settings of the length menu such as is explained here https://datatables.net/examples/advanced_init/length_menu.html using:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
So I'd do something like this, which doesn't work:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
This is likely obvious, but I'm just starting out with js.
You need add letter l in dom
Something like this:
var oTable = $('#example').DataTable( {
dom: 'Blfrtip',
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
You can check the reference in: https://datatables.net/reference/option/dom
Result : https://jsfiddle.net/g2kdfrcu/
I've created a simple search but it's not filtering, I'm using datatable plug-ins. I don't know what did I missed in my script.
<input type="text" id="txtserial" name="txtSerial" class="form-control" />
Here's my javascript:
var dtmyJob = $('#myJob').DataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
iDisplayLength: -1,
sScrollY: "40vh",
bScrollInfinite: true, //this property disables pagination
"scrollCollapse": true,
"paging": false,
"bInfo": false,
"bFilter": false,
"bSort": false
});
$("#txtserial").on('keyup', function () {
dtmyJob.columns(2).search(this.value).draw();
alert(dtmyJob);
});
Remove bFilter: false because you have disabled searching ability and that's why searching with columns().search() doesn't work.
Use dom option if you just want to hide the search box.
For example:
'dom': 'lrtip'
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'm using this plugin here https://www.datatables.net/ along side jQuery.2.1.4.
I'm also trying to utilize functionality provided by both https://www.datatables.net/manual/styling/jqueryui and https://jqueryui.com/
However i keep getting the following error
Uncaught TypeError: Cannot read property 'defaults' of undefined
The code throwing that error is below & its in java-script file "dataTables.jqueryui.js" which i downloaded from here https://www.datatables.net/manual/styling/jqueryui
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
dom:
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
renderer: 'jqueryui'
} );
EDIT:
Below is how i'm initializing my tables
var oTable;
function TableSorter(arr) {
if (arr == 'Custome') {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else if (arr == null) {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": arr }],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
};
The problem was being cause by loading "jquery-ui.js" before "jquery.dataTables.js".
I modified my #Scripts.Render('') order in my shared view such that "jquery.dataTables.js" is loaded first before "jquery-ui.js" and that resolved the problem.
Is there any possibility to manually delimit the numbers of the displayed rows of a (Data)Table?
Normally we use filtering input, but then the values are fixed; for example: 10, 25, 50, 100, All.
I would like to have a text field where I could insert the number of rows I wish to display; for example: 3, 7, 29, etc and then after clicking a button we would display the "pages" of the table only with the inserted number of rows.
I read some tutorials and did some searches, but was unable to find anything about it.
Here the JavaScript of my table (but I don't think it helps):
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
Any help is welcome!
Straight from datatable forums.
var oTable;
$(document).ready(function() {
$('YourButtonIdorSelector').click( function () {
var newDisplayLength = $("TextFieldIDOrSelectorHere").val();
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = newDisplayLength;
oTable.fnDraw();
});
oTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
});
or
var searchTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
searchTable.fnSettings()._iDisplayLength = $("TextFieldIDOrSelectorHere").val();
searchTable.fnDraw(); //redraw the table
You can simply add the new length you want displayed to the _iDisplayLength property and redraw the table.
When creating the data table, this stuff would go in the complete callback function fnInitComplete
$('#search-table').dataTable({
"fnInitComplete": function(oSettings,json){
var $table = this;
//example of how many rows to show
var newLength = 29;
//add the new value to your datatable object
oSettings._iDisplayLength = newLength;
//redraw the table, you have to do this to see the changes
$table.fnDraw();
},
//the rest of your settings
});