I have a DataTable which i have been styling/setting up and i'm almost there but i just cant figure out the last few styling things i'm after for the search input
Left align the input
Make field wider
Set focus on load
Make field same size as other fields on site
I have the following code i'm using
JQuery
$('#dialPlanListTable').dataTable({
"ordering": true, // Allows ordering
"searching": true, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table
"columnDefs": [
{
"targets": 'dialPlanButtons',
"searchable": false, // Stops search in the fields
"sorting": false, // Stops sorting
"orderable": false // Stops ordering
}
],
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"language": {
"search": "_INPUT_", // Removes the 'Search' field label
"searchPlaceholder": "Search" // Placeholder for the search box
}
});
Current look
HTML Returned/Rendered
<div class="top">
<div id="dialPlanListTable_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control input-sm" placeholder="Search" aria-controls="dialPlanListTable">
</label>
</div>
</div>
As you can see the search box is smaller than the one above (which will be removed once this one is styled) and is not left to the table. I have looked at the https://datatables.net/ site and cant find the last few things i need.
I'd prefer NOT to have to update my .css as i don't want to affect the reset of the site, just this page only so dont mind using JQuery to add styling. also the input is sat inside the label as shown in the HTML above
Not what i was hoping for but resolved by doing the below
$('#dialPlanListTable').dataTable({
"ordering": true, // Allows ordering
"searching": true, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table
"columnDefs": [
{
"targets": 'dialPlanButtons',
"searchable": false, // Stops search in the fields
"sorting": false, // Stops sorting
"orderable": false // Stops ordering
}
],
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"language": {
"search": "_INPUT_", // Removes the 'Search' field label
"searchPlaceholder": "Search" // Placeholder for the search box
},
"search": {
"addClass": 'form-control input-lg col-xs-12'
},
"fnDrawCallback":function(){
$("input[type='search']").attr("id", "searchBox");
$('#dialPlanListTable').css('cssText', "margin-top: 0px !important;");
$("select[name='dialPlanListTable_length'], #searchBox").removeClass("input-sm");
$('#searchBox').css("width", "300px").focus();
$('#dialPlanListTable_filter').removeClass('dataTables_filter');
}
});
So got the look i was going for
Solution 1
You can create a custom textbox (in this case you have full control of styling ) in the top of the table and hide the default text box.
<p>
<input type="text" id="mySearchText" placeholder="Search...">
<button id="mySearchButton">Search</button>
</p>
var table = $('#dialPlanListTable').dataTable({
"ordering": true, // Allows ordering
"searching": false, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table
"columnDefs": [
{
"targets": 'dialPlanButtons',
"searchable": false, // Stops search in the fields
"sorting": false, // Stops sorting
"orderable": false // Stops ordering
}
],
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"language": {
"search": "_INPUT_", // Removes the 'Search' field label
"searchPlaceholder": "Search" // Placeholder for the search box
}
});
$('#mySearchButton').on( 'keyup click', function () {
table.search($('#mySearchText').val()).draw();
} );
Solution 2
based on their documentation http://datatables.net/examples/basic_init/dom.html you can add a custom class to the search box container( for example myCustomClass)
"dom": '<"myCustomClass"f>rt<"bottom"lp><"clear">', // Positions table elements
You can customize the look of the search box by adding styles on that class
.myCustomClass{
background-color:red
}
Related
Here is my datatable initialization :
$(document).ready(function () {
var table = $('#dtBasicExample').DataTable({
"stateSave": true,
"responsive": true,
"ordering": true,
"pagingType" : "simple_numbers",
"lengthChange": true,
"fnInitComplete": function () {
var myCustomScrollbar = document.querySelector('#dt-vertical-scroll_wrapper .dataTables_scrollBody');
},
"scrollY": 620,
"scrollX": true,
"scroller": {
"rowHeight": 30
},
"scrollCollapse": true,
"deferRender": true,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"language": {
"zeroRecords" : "No Records were found",
"lengthMenu": "_MENU_"
}
});
table.column( 0 ).visible( false ); // hide first column
table.columns.adjust().draw(); // not working
});
Photo not mine, but this is same as what my table looks like. Table header is not aligned.
I already set the table width="100%", I have tried Table.columns.adjust().draw(), Table.clear().draw() and some css hacks for 'dataTables_scrollHeadInner' and 'dataTables_scrollHead' as mentioned in some posts but neither of them have worked.
Please note that it only happens when the data is loaded for the first time. The width of the table changes when I click pagination button or even F12 to bring up the dev tool console and looks as expected.
Any help will be appreciated.
I have a DataTable and I would like to display data over several pages. I would like pages with 100 elements on each. In addition I would like to have some of my columns sortable.
In my Database I have more than 100 elements and my DataTable is only showing the first 100...
I've noticed some things :
1) When I put "bServerSide": false my columns are sortable BUT my number of rows is limited to 100 (one page with 100 elements).
2) When I put "bServerSide": true my number of rows is now correct (several pages with 100 elements on each) BUT my columns are not sortable anymore (I mean the sort function doesn't work when I click on the sort button).
$('#tableSupervisionElecteur').DataTable({
"bLengthChange" : false,
"bFilter" : false,
"bProcessing": false,
"searching": false,
"ordering": true,
"order": [[1, 'asc']],
"bStateSave": false,
"pageLength": 100,
"iDisplayStart": 0,
"bServerSide": true,
"initComplete": function(settings, json) {
},
"fnDrawCallback": function () {
},
"sAjaxSource": "sourcesDataTables",
"aoColumns": [
...
],
columnDefs: [
{
orderable: false,
targets: 0
},
{
orderable: false,
targets: 7
},
{
orderable: false,
targets: 8
},
]
});
I would like to have BOTH features working together (sorting and displaying) and not one or the other.
Furthermore my DataTable needs to be able to handle approximately 30 000 rows.
Remove orderable: false for the columns which you need ordering and also specify the order(asc or desc) in "order" option
Its depending on your server side, as order is processed on server. Server must check if any request for asc or desc and build your database query, each column field sorted base on that.
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'
I've recently added the 'KeyTable' extension to datatable, to navigate through my table with the arrowkeys.
First, I added the following code to get the first record of my table selected:
gruposDispTab.cell(':eq(0)').focus();
But I get the last record selected:
Then, with the KeyTable function added, the up arrow key selects the lower row, and the down arrow key selects the upper row; even with that, the inner scroll of my table works fine (up arrow key - scroll goes up, down arrow key, scroll goes down).
I don't know what datatable configuration I need to change to fix this.
P.D.: In case this is needed, this is how I initialized my datatable:
gruposDispTab = $('#gruposSelect').DataTable({
//deferRender: true,
scrollY: 215,
scrollX: false,
scrollCollapse: true,
scroller: true,
dom: 't',
sScrollInner: 702,
bPaginate: false,
info: false,
"destroy": true,
"keys": true,
searching: true,
//orderCellsTop: true,
"language": {
"search": "Buscar: ",
"zeroRecords": "No se encontraron coincidencias",
"info": "Mostrando página _PAGE_ de _PAGES_"
}
});
Try disabled the ordering in your DataTable.
$('#example').dataTable( {
"ordering": false
} );
source: https://datatables.net/reference/option/ordering
I'm using jQuery DataTables v1.10.
At our new website we have a dataset with more than 10000 records.
The displayLength is set by default at 50 records.
After initializing the DataTable, 50 of 10000+ records are showing, but there's only 1 pagination item visible and a forward and backward arrow which are both disabled.
When I'm changing the displayLength to 100, I get one page with 100 records out of 10000+, but still one page instead of more than 100 pages.
This is our initialisation:
"oLanguage": oDatatablesNL,
"sDom": '<"dt-toolbar clearfix"fpl>rt<"row-actions"><"dt-toolbar bottom clearfix"p>',
"processing": true,
"serverSide": true,
"ajax": "/?async=yes&get=datatable,
"ordering": true,
"order": [[ 4, "asc" ]],
"paging": true,
"pagingType": "full_numbers",
"displayStart": 0,
"lengthMenu": [[50, 100, 500], [50, 100, 500]],
"lengthChange": true,
"searching": true,
//"deferRender": true,
"columns":
[
{
"data": "firstColumn",
"class": "first"
},
{
"data": "secondColumn",
"class": "second"
},
],
"createdRow": function( row, data, dataIndex ) {
dtUpdateData(row, data, dataIndex);
},
"initComplete": function() {
dtExtras(dtLengths);
}
And our serverside data:
{"draw":1,"recordsTotal":"15827","recordsFiltered":"50","data":[{'column1':'test','column2':'test2'}]
The problem seemed to be that recordsFiltered should be the number of records which were filtered by the query. I've searched for the answer during more than 2 hours; feeling really dumb now... ;)