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.
Related
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.
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
I'm in the AngularJS environment, and trying to get a jqWidgets TreeGrid working.
I have the dataAdapter all wired up with the Json formatted data, however the grid renders only one row.
I also have a test treeGrid on the same page, and with sample data, which is working fine.
I'm putting the final Json data setting side-by-side to try and determine where I'm going wrong.
I've used this page as a guide to wire up the treegrid settings, etc. http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm
Here is the html showing the jqx treegrid directive for the "bad" grid:
<jqx-tree-grid jqx-instance="jqGridHierObj" jqx-settings="vm.jqGridHierSettings"></jqx-tree-grid>
And the "bad" Json data tree settings binded vm.jqGridHierSettings (too large to post inline):
http://www.bobmazzo.com/grid/TreeGrid_Data_Bad.txt
and here is the "good" grid with Employee test data :
HTML:
<jqx-tree-grid jqx-instance="jqGridEmpObj" jqx-settings="vm.jqGridEmpSettings"></jqx-grid>
vm.jqGridEmpSettings Json data :
http://www.bobmazzo.com/grid/TreeGrid_Data_Good.txt
and from my Angular controller code, a snippet of the javascript with Json data bindings :
I need help to figure out why the "bad" grid is not working ! And why it only renders one row, where is should be showing a hierarchy of data.
thanks.
Bob
I found the solution. You must define the “children” as an array type in the 'source' object; that is, prior to passing that object into the dataAdapter. See the dataFields property below :
var source = {
dataType: "json",
dataFields: [
{
"name": "id",
"type": "number"
},
{
"name": "field0",
"type": "string"
},
{
"name": "field1",
"type": "number"
},
{
"name": "field2",
"type": "number"
},
{
name: 'children', // MUST DEFINE CHILDREN AS ARRAY TYPE
type: 'array'
},
],
hierarchy: {
root: 'children'
},
id: 'id',
localData: myData
};
var dataAdapter = new $.jqx.dataAdapter(source);
I get the message when trying to populate my table. Here's the simplified code.
$("#showUsers").on("click", function() {
$.ajax({
url: "/showUsers",
contentType: "application/json",
processData: false,
complete: function(data) {
$("#output").html(data.responseText);
$("#example").dataTable({
"aaData": data,
"aoColumns": [{
"sTitle": "Name",
"mDataProp": "name",
"sDefaultContent": ""
}, {
"sTitle": "Movie",
"mDataProp": "movie",
"sDefaultContent": ""
}]
});
}
});
});
And
<table id="example">
<thead>
<th>name</th>
<th>movie</th>
</thead>
</table>
The data is assigned valid json:
[{
"name": "Dan",
"movie": "Amelie"
}, {
"name": "Rob",
"movie": "Dungeon"
}]
I've read that sometimes it messes with the table itself and the headers and stuff so I tried removing the <thead> from my table definition but it results with the same issue.
Funny thing is that, if I replace "aaData":data with "aaData": plus the json itself, it works. But I can't make data fill the requirements needed by DT.
The ajax data comes from a node-mysql module which is working properly.
If I change data to data.responseText (this is the json as shown before) I get the warning requested unknown parameter 'name' from the data source for row 0.
I know this should be fairly simple for any not-so experienced DataTables user so thanks in advance. Somehow I'm being unable to sort it out.
SOLVED
The MySQL response comes with a data.responseJSON which is a working format to give to aaData. Thanks.
For the sake of flagging the question as awnsered.
SOLVED.
The mysql response comes with a data.responseJSON which is a working format to give to aaData. Thanks.
Just got wondering why my dataTable was not filling.
In addition to the correct json format needed with aaData, iTotalRecords and iTotalDisplayRecord, aaData needs to be an array (['a', 'b', ...]) and not an object ({'a': 'b', ...}).
I am using ExtJs4.I have a form in my web application in which there is text box.The scenario is to provide an AJAX like search(like Google) when any key is pressed in the text box.Search will look into a web service and display the result(JSON object) in drop drown.Similar to Google search.
Is there any idea,link or tutorial for doing this?
Thanks
You could use ComboBox for this. With trigger or without one (that looks like a TextBox).
Sencha provides good examples:
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
This is a simple example:
{
xtype: 'combo',
id: 'myCombo',
store: Ext.create('Ext.data.ArrayStore', {
model: Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: ['id','data1','data2']
}),
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'array'
}
}
}),
triggerAction: 'query',
minChars: 2,
fieldLabel: 'Search',
displayField: 'data1',
msgTarget: 'side',
triggerCls : 'x-form-search-trigger', // Search Icon For Instance
listConfig: {
getInnerTpl: function() {
return '<div>{data1}</div><div>{data2}</div>';
}
}
}
And JSON file:
[
['1','data1-1','data2-1'],
['2','data1-2','data2-2'],
['3','data1-3','data2-3'],
['4','data1-4','data2-4'],
['5','data1-5','data2-5']
]
Try this example: http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
I think this example http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html will be interesting for you. This realization use standard combobox control. In your case you need to set minChars property = 1, in this case store binded to Combobox will generate standard READ query with filter param to server. You can generate results there.