have simple Bootstrap 3 toggle navigation :
I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...
I try with similar problems, but no result,when go to page,menu is collapsed.
Hey there,
I'm trying to to sort one of our tables based off of a prescribed value according to the contextual value of a row. So, for instance, row A may have a smaller amount listed in the Price field, but it is actually given a high data-sort value because it is a higher relative price to an item it is in relation to than row B which has a higher absolute amount in the Price field yet lower relatively.
Even if that doesn't make sense :), what's happening is that a value is assigned to the <td>'s data-sort attribute in order to sort according to that yet it's the actual fields value that is being sorted on.
I have a regular <!DOCTYPE html> declaration, so I should be good to go w html5 usage and I have this in my initialization order: [[6, 'desc']]
Any help is appreciated!
I am trying to get the percentage sign behind an INT field value column. I've searched but almost all forum posts relate to the Legacy Interface notice for earlier versions.
The only place I've found in either the manual or forum post similar was a forum post and applied the following code, but it leaves the % sign in front of the integer:
{ data: "Pct_Dif_Price", render: $.fn.dataTable.render.number('', '', 'post', '%', 0 ), "sClass": "alignright" },
How can I display characters before or after what is in the cell?
Thanks
My issue is quite common here. And I have tried too many things but to no avail.
I am simply setting the "scrollX": false since in IE 9 it is giving me the horizontal scroller and I do not need it. But as soon as I set it there is a distortion between the table body and the table header. It is very minute in Chrome however in IE 9 it is quite visible.
I have not done anything fancy with the CSS or the API.
Any ideas on how this can be resolved??
Hello all,
I am trying to make below bootstrap table code works. Below is my code. On rendering on browser, I am getting column headers, but not the data field values. Could someone please let me know what I am doing wrong ?
<table id="table1" data-toggle="table" data-toolbar=".toolbar">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<script type="text/javascript">
var data = [
{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
},
{
"name": "blog",
"stargazers_count": "13",
"forks_count": "4",
"description": "my blog"
},
{
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}
];
$(function() { $('#table1').bootstrapTable({data: data });});
</script>
I don't know what is happening but, When I insert the PDF,Print... buttons, the responsive design property of the dataTable is lost. I put the buttons the table doesn't change his size when i resize the browser, do you know any solution for that?
Thank you very much in advance.
I'm trying to load a table through ajax and am getting that cryptic error message. The data does seem to load correctly, but there are 4 blank rows that load before the data does. Here's my code:
$('#testTable').DataTable({
"paging": true,
"lengthChange": false,
"info": false,
"data": "data",
"ajax": "http://localhost:8888/data/claims.json",
"columns" : [
{"data": "status"},
{"data": "priority"},
{"data": "date_of_claim"},
{"data": "code"},
{"data": "name"},
{"data": "file"},
{"data": "team"},
{"data": "flash"},
{"data": "assigned_to"},
{"data": "claim_status"},
{"data": "assigned_lane"}
]
});
And the json response:
{
"data": [
{
"status": "New Mail",
"priority": "High",
"date_of_claim": "5/1/2015",
"code": "010",
"name": "Bunny, Bugs",
"file": "123123123123",
"Team": "A Team",
"flash": "",
"assigned_to": "User 1",
"claim_status": "RFD",
"assigned_lane": "1"
},
{
"status": "Pending Scanning",
"priority": "Low",
"date_of_claim": "2/13/2015",
"code": "010",
"name": "Duck, Daffy",
"file": "612801212",
"Team": "B Team",
"flash": "",
"assigned_to": "User 2",
"claim_status": "RFD",
"assigned_lane": "2"
},
{
"status": "New Mail",
"priority": "Low",
"date_of_claim": "5/12/2015",
"code": "020",
"name": "Bunny, Bugs",
"file": "987987986",
"Team": "A Team",
"flash": "Documents exist",
"assigned_to": "User 1",
"claim_status": "Cancelled",
"assigned_lane": "4"
},
{
"status": "New Mail",
"priority": "High",
"date_of_claim": "5/4/2015",
"code": "010",
"name": "Bunny, Bugs",
"file": "67000871",
"Team": "C Team",
"flash": "Dangerous",
"assigned_to": "User 3",
"claim_status": "Open",
"assigned_lane": "1"
}
]
}
And finally the HTML:
<table id="testTable" class="table">
<thead>
<tr>
<th>Status</th>
<th>Priority</th>
<th>Date of Claim</th>
<th>Code</th>
<th>Name</th>
<th>File Number</th>
<th>Team</th>
<th>Flash</th>
<th>Assigned To</th>
<th>Claim Level Status</th>
<th>Assigned Lane</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Any help would be appreciated, thanks!!
Hello I'm writing my first application in angular-datatables. I've seen a few plunkers with demonstrating the usage of promise object. Most of them tend not to work. I'm stuck in my project as I can't by any means load my data to a table using a service and resolved $q.defer object. Could someone point me in the right direction?
Hi,
I have created a datatable using AJAX data. the table has two columns of checkboxes created as below -
, { data: "Message", render: function ( data, type, row ) { if ( type === 'display' ) { return '<input class="checkbox1" type="checkbox" name="cb" value="' + data + '">'; } //console.log( 'Row index: '+ row( this ).index() ); return data; } }, { data: "Component", render: function ( data, type, row ) { if ( type === 'display' ) { return '<input class="checkbox1" type="checkbox" name="cb_component" value="' + data + '">'; } return data; } }
The column with Component data needs to be hidden. Once user checks any checkbox in Message column, the corresponding checkbox in Componenet should also get checked so that form can send that data back to the back end.
How can this be achieved?
I am trying to set id of the checkboxes based on the row index and get those on the click event. but I cannot get either of them working.
//console.log( 'Row index: '+ row( this ).index() ); - returns -1
and the debugger does not seem to hit the click event either :(
Thanks. SKL
Hi,
Using datatables editable (currently trial version) I have now succesfully set up editing. But, my requests are a little bit slow since it shows a huge amount of data in the form, joined over several tables.
Using Firebug I discovered that the whole form was reloaded after submitting an inline edit. To me this seems like overkill, in case it is succesfully changed in the database, why not just redraw the input with the return value, rather then performing the whole DB request again.
So basically my question is: can I somehow prevent (maybe in an aftersubmit event or something) the new request to reload the whole table, and instead of this just redraw the input / row I changed? This would save me 3 - 4 secs of waiting every time a value is edited.
Hopefully someone can help me out, thanks a lot!
how can i send the screen shoot "Allen"
Hello,
I have problem with error: Uncaught TypeError: Cannot read property 'replace' of undefined - this exist on: http://localhost:53145/bundles/dataTables.editor.min.js
My table looks like: ` <script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax:
{
edit: {
type: 'PUT',
url: '/request/editplan.json'
}
},
table: "#example",
fields: [{
label: "Model:",
name: "productShortName"
}, {
label: "Lipiec:",
name: "quantity1"
}, {
label: "Sierpień:",
name: "quantity2"
}, {
label: "Wrzesień:",
name: "quantity3"
}, {
label: "Październik:",
name: "quantity4"
}, {
label: "Uwagi:",
name: "description"
}
]
});
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
$('#example').DataTable({
dom: "Tfrtip",
ajax: "/request/plan.json?id=@ViewBag.PlanId",
columns: [
{ data: "id"},
{ data: "productShortName" },
{ data: "quantity1" },
{ data: "quantity2" },
{ data: "quantity3" },
{ data: "quantity4" },
{ data: "description" }
],
tableTools: {
sRowSelect: "os",
aButtons: [
{ sExtends: "editor_edit", editor: editor }
]
}
});
});
</script> ` can you help me with this?
Regards, Radek
Hi Allan and Community, I'm upgrading DataTables from 1.9.x to 1.10.7. I've hit a warning popup: "DataTables Warning: Table id=xxx - Error." I'd appreciate suggestions/tips for debugging.
The Bookmarklet Debug code: usekog (https://debug.datatables.net/usekog)
Of the dozen or so pages I've upgraded, only one throws this message. I've tried DataTables versions 1.10.6 and 1.10.7, and jQuery versions 1.11.x and 2.3.x, and dataTable 1.9 and the 1.10 javascript syntax, . All seem to generate the same error. I've checked the AJAX -- the server returns http status 200, the debugged AJAX request looks ok. After I OK the popup, the datatable renders.) The test case has eight records. I suspect it's an out of memory error / call stack overflow from the jsquery calls.
Examples a page that works with 1.9 and one that throws the error (1.10): https://www.retrieverresults.com/rr/profile/profile/d/23601 (this works. the DataTable is under the detail tab): https://www.retrieverresults.com/t2/profile/profile/d/23601 (this breaks)
Thanks for the help! Russ
I am using jquery ui tabs to display two grids side by side within same div. Grid are displayed using jquery datatables plugin.
Recently i have added the feature of fixed columns in both of my grids, that makes IE 9 behave weirdly at random.
This behavior happen at total random but on one of the two grids not on both. IE 9 display fixed column portion over the horizontal scroll-bar.
Funny thing is if you sort out the affected table or enter some characters in search textbox, this overlapping portion got fixed automatically.
I search on it and came to know that draw() function is called on these actions so i tried to call this function manually on tab selection event but that didn't solve the problem.
Below is the JS code for tab selection event: `$('#divEAMountDismountGridsTabs, #CurrentSpec').tabs( { select: function(event, ui) { // Do stuff here var tempDismount = $('#tblDismountAtt').DataTable(); tempDismount.draw(false);
var tempCurrentSpec = $('#tblCurrentSpec1').DataTable();
tempCurrentSpec.draw(false);
}
});`
Below is the JS i write on datatable initialization(both grids got the same attributes so i am just copying the initialization of first grid).
var tableDismountAtt = $('#tblDismountAtt').dataTable(
{
"bFilter": true,
"bInfo": false,
"bDestroy": true,
"bwidth": '100%',
//"sDom": '<"top"f>',
'iDisplayLength':5000,
"order": [[2, "asc"]],
dom: "Cfrtip",
scrollY: "140px",
scrollX: "100%",
paging: false,
scrollCollapse: true,
"aoColumnDefs" : [
{'bSortable' : false, 'aTargets' : [ 0 ] , "width": "80px"}, //Switch to Dismount
{'bSortable' : false, 'aTargets' : [ 1 ], "width": "80px"}, //Parts Status
{'bSortable' : true, 'aTargets' : [ 2 ], "width": "80px"}, //Sales Code
{'bSortable' : true, 'aTargets' : [ 3 ] , "width": "60px"}, //Price
{'bSortable' : false, 'aTargets' : [ 4 ], "width": "60px"}, //Currency
{'bSortable' : true, 'aTargets' : [ 5 ], "width": "150px"}, //Sales Cod Description
{'bSortable' : false, 'aTargets' : [ 6 ], "width": "80px"}, //Quantity
{'bSortable' : false, 'aTargets' : [ 7 ], "width": "380px"}, //Remarks
{'bSortable' : true, 'aTargets' : [ 8 ], "width": "80px"}, // PSO Ref No.
{'bSortable' : false, 'aTargets' : [ 9 ], "width": "150px"}, //Model Sub Name
{'bSortable' : false, 'aTargets' : [ 10 ] , "width": "80px"}, //Value
{'bSortable' : false, 'aTargets' : [ 11 ], "width": "150px"}, //Date
{'bSortable' : true, 'aTargets' : [ 12 ]},
{'bSortable' : true, 'aTargets' : [ 13 ]},
{'bSortable' : true, 'aTargets' : [ 14 ]}
]
});
/*Freezing Dismount Attachment Columns*/
new $.fn.dataTable.FixedColumns( tableDismountAtt, {leftColumns: 6, heightMatch:'auto'});
Greetings,
I am combining bootstrap with Fluid Layout, but when I resize the page, the table is not getting resized as well.
Here is my table definition -
<div class="row" >
<div class="col-lg-12">
<div class="panel panel-default">
<div style="text-align:left;cursor:pointer;" class="panel-heading bordered-blue" id="systeminfo-header-div">
<span id="systeminfo-span" class="glyphicon glyphicon-chevron-right"></span>
System Information
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table id="SystemInfoRepeater" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Site</th>
<th>Name</th>
<th>Model</th>
<th>Test1</th>
<th>Vendor</th>
<th>Serial</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
Here is the javascript code -
table = $(divId).DataTable({
stateSave: true,
columns: columns,
data:items,
tableTools: {
sRowSelect: "os",
//sRowSelector: 'td:first-child',
aButtons: [
{ sExtends: "editor_create", editor: editor, sButtonClass: 'btn btn-success' },
{ sExtends: "editor_edit", editor: editor, sButtonClass: 'btn-primary'},
{ sExtends: "editor_remove", editor: editor, sButtonClass: 'btn-danger'}
]
},
"dom": "<'row' <'col-xs-6 col-sm-3'T><'col-xs-6 col-sm-3'><'col-xs-6 col-sm-3'f><'col-xs-6 col-sm-3'C>r><'row't><'row'<'col-xs-4'l><'col-xs-3'i><'col-xs-5'p>>",
"colVis": {
"buttonText": "Select Columns",
"bRestore": true,
"activate": "click"
}
} );
I even tried changing the row to row-fluid, but I do not see any css styles for row-fluid.
Thanks.
Hello everybody.I have a small question as follow , I use the parameter passed dataSrc AJAX . I have a function that takes on values and returns JSON string parameter then I must declare how you use dataSrc. In my function GET_PRODUCT input a parameter as string @product_name . The result as JSON , I do not know how to pass parameters in here .
"ajax": {
"url": "../BUS/WebService.asmx/GET_PRODUCT",
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "POST",
dataSrc: function (json) {
return $.parseJSON(json.d);
}
//dataSrc: function (json(candy)) {
// return $.parseJSON(json.d);
//}
//dataSrc: "Candy",
},
Thank you.
It seems that MMM DD, YYYY would give me "May 13, 2015" with the "ultimate" plugin. http://datatables.net/blog/2014-12-18
With Editor, it seems I would need to specify M d, yy to get the same result of "May 13, 2015". https://editor.datatables.net/examples/simple/dates.html
Is this observation correct? If yes, is there any way to use the same formatting string for both, or do I need to plan for this difference?
Hi,
I was struggling earlier today to set my initial datatable sort order to nothing (i.e. let SQL Server control the initial order). I set the order to "order": [] - as suggested in the latest documentation here - https://datatables.net/reference/option/order, however this didn't seem to work properly on my datatable which has only two columns (only one of which contains data).
I then discovered the page https://datatables.net/forums/discussion/1399/how-to-no-sort-by-default - which contains a "legacy" notice. The suggestion (by Allan) of adding the "bSort": false switch works in my code.
This has me wondering - how many other features now referred to as "legacy" still work? Are there any plans for some or all of these to be deprecated in a future release?
Thanks.
Alright, sorry about the cryptic title but it was the only thing I could think of to describe what I'm trying to accomplish here. Here's the setup:
Latest DataTables and Editor versions
I have a database column of all IP Addresses we own. Some IPs are tied to an item and some are not. I have the data properly showing inside DataTables and inside the Editor Select field for IP Address. This all works fine. Here's the kicker, If another item returned in the DataTables query is using an IP Address then it should NOT show in the Editor Select field as selectable. I've tried a few different ways to accomplish this but I can't seem to show the current item's IP (when set) and not any of the other IPs that have already been assigned.
Goals: -Show each item's IP in DataTables table results view
-Show current selected item's current IP in Editor form's IP Address Select drop-down
-Show available IPs that are not linked to another item in Editor form's IP Address Select drop-down
I hope this makes sense. We're trying to basically keep track of which IPs have been used and which haven't inside our database. We want to be able to pick an available IP and assign it to an item but then not be able to pick that IP again in another item. Is doing a separate ajax call from the editor field for the IP Address to retrieve the data the only option here? Not quite sure how to go about doing this.
Please see ..https://datatables.net/examples/plug-ins/dom_sort.html.In this example if you filter for dropdown list value it want work. As I already worked on this like below. Create new Hidden Column which will have dropdown list's selected Text , and sort with hidden column where as make sortable false for dropdown column. Correct if i'm doing something wrong...