I am using datatable 1.9 . I am facing problem in searching. My table look something like this
<'table> <'td> <'div><'span class="inlineEditCategory" >category<'/span><'/div> <'/td> <'/table>
So if I search on the word like div, span then all rows are is shown which should not. I figure out that content between td is being searched. Is their any way to search only the text part.
You can use the html filtering plugin.
Include the js file after the inclusion of datatables.js main script.
And the use the plugin like this in your datatable initialization:
$('#example').dataTable({
"columnDefs": [
{ type: "html", target: 0 }
]
});
You can also do this with the aoColumn option like this:
$('#example').dataTable( {
"aoColumns": [
{ "sType": "html" },
....
]
} );
For more info see the documentation
Related
I'm using datatables and I have created this javascript code
table = $('#examples').DataTable({
"ajax": {
type: "POST",
url: "./../../" + "/back-end/switch-ajax-listening/switch-ajax-listening.php",
dataType: "json",
data:
{
actionId: "page1GetAll"
}
},
dom : "B<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'<'#colvis'>p>>",
"buttons": [
{
extend: 'colvis',
postfixButtons: [ 'colvisRestore' ],
container : '#colvis',
columns: '0,1,2,3,4,5'
}
],
responsive: true,
"columns": [
{ "data": "idSelectPacketName"},
{ "data": "idSelectCompany" },
{"data":null,"defaultContent":"<button>View</button>"}
],
});
It works very well but I cannot be able to understand this part:
"B<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'<'#colvis'>p>>"
I have not written this string I have copied from an example but I am not able to understand how it works. Or have you known a guide to understand very well this string?
Because my problem is that some times the button is not aligned with the table, have you some ideas in order to solve it? Thanks.
It's a bit flakey as the author admits himself, for now, you need to put the Datatables keyletters in the correct places amongst the html tags. Something like:
dom : "<'row'<'col-sm-6'lB><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'<'#colvis'>p>>",
(placing the 'B' after the 'l')
You may also have to use CSS to obtain the desired layout.
I have some styles that I need to apply to all DataTables buttons so that they match the rest of the buttons on my site. I can add that using the className option as below, but I'd like not to have to supply the same thing every time.
Manual example
$('#myTable').DataTable({
buttons: [
{
text: 'I look like a button',
className: 'icanhazdefalt'
}
]
})
I see in the docs that the default value is undefined. I couldn't find anywhere in the docs that you could override the default for this or other options. Is this possible? Something like:
$.fn.DataTable.Buttons.options.extend({
className: 'icanhazdefalt'
})
What I need is to be able to set the default for the plugin itself (rather than for a specific instance). Then all instances I create on the page from then on would have the default I specified. I can include the script that sets the default right after the plugin script (perhaps in a layout file) so that I never have to manually do anything to get all subsequent instances to have the default className (but still be able to override it by explicitly providing it as shown in the 'manual example' above).
Use:
$('#myTable').DataTable( {
buttons: {
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'excel', className: 'excelButton' }
]
}
} );
Reference: https://datatables.net/reference/option/buttons.buttons.className
EDIT: There might be a better and simpler way of doing this but, this is what I came up at the moment.
//DataTable
var table= $("#myTable").DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'I look like a button'
},
{
text: 'I dont'
}
]
} );
//Add class to all buttons
$(table.buttons()).each(function(){
$($(this)[0]["node"]).addClass("sampleClass");
});
You can also change your button selection by giving a parameter for buttons().
See this link for that.
Here is a fiddle for demo:
https://jsfiddle.net/rfb93mqs/5/
In the fiddle example if I want to save a report as any format like Csv,Exel,print it contains only One Header...
Is there any way to save the report with multiple Header row??
I am using Datatable v.1.10.10.
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
<script>
You can try something like this: Break up the table into two tables. One table will just have the top row of headers and then load your datatable. Put everything in one div and then use some other method to export everything in that div to pdf etc. I haven't tried it but it's just an idea.
I'm trying to find the equivalent of bSelectedOnly in the new version of Datatables 1.10.
I only want to print rows that the user has selected, or print all rows if they havn't selected any.
"tableTools": {
"sSwfPath": "/Datatables-1.10.0/extensions/TableTools/swf/copy_csv_xls.swf", //Add buttons for saving table data in these formats
"sRowSelect": "os", //allow user to select multiple rows in the table
"aButtons": [
{
"sExtends": "print",
"bSelectedOnly": "true",
},
{
"sExtends": "select_none",
},
]
},
It hasn't changed (see docs). But you have an error in your code. Instead of
"bSelectedOnly": "true",
it should be
"bSelectedOnly": true,
Also, bSelectedOnly is not available as a print option. It is only available as a flash button option. See here. That is the actual reason why what you're trying to do will not work :)
I'm trying to get a Dojo datagrid working - I have replicated the first example on the documentation page (http://docs.dojocampus.org/dojox/grid/DataGrid) & it works just fine.
However, when I try to display the grid inside another div (i.e. putting 'gridContainer4' from the example inside any other div) nothing displays...
Any help would be much appreciated - can't find anything about this anywhere online!
Finally figured it out:
The example text creates the new dojox.grid.DataGrid and applies it to "document.createElement('div')" - changing this to the ID of an existing div fixed the problem (rather than appendChild-ing it to another div)
Original code:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
changes to:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, "gridContainer4");