ko.bindingHandlers.dataTable = {
init: function (el, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
viewModel.SelectedC({name:"test1"});
ko.applyBindingsToDescendants(bindingContext, $(el));
},
update: function (el, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var dt = $(el).DataTable(ko.toJS(valueAccessor()));
dt.on( 'click', 'tr', function (e) {
var clickedParentElement = $(e.originalEvent.target).parents()[0];
var bContext = ko.contextFor(clickedParentElement).$data;
//ko.contextFor(clickedParentElement).$data.SelectedItem(ko.toJS((dt.row(this).data())));
ko.contextFor(clickedParentElement).$data.SelectedC(dt.row(this).data());
ko.applyBindingsToDescendants(ko.contextFor(clickedParentElement).$data, dt.row(this));
} );
}
}
var viewmodel = function (gridC) {
var gridConf = {
"Columns": "[{\"displayName\":\"Id\",\"field\":\"id\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":false},{\"displayName\":\"Name\",\"field\":\"name\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Position\",\"field\":\"position\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Office\",\"field\":\"office\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Extn\",\"field\":\"extn\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"StartDate\",\"field\":\"start_date\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Salary\",\"field\":\"salary\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true}]",
"Data":"[{ \"id\": \"1\", \"name\": \"Tiger Nixon\", \"position\": \"System Architect\", \"salary\": \"$320,800\", \"start_date\": \"2011/04/25\", \"office\": \"Edinburgh\", \"extn\": \"5421\" }, { \"id\":\"2\", \"name\": \"Garrett Winters\", \"position\": \"Accountant\", \"salary\": \"$170,750\", \"start_date\": \"2011/07/25\", \"office\": \"Tokyo\", \"extn\": \"8422\" }, { \"id\": \"3\", \"name\": \"Ashton Cox\", \"position\": \"Junior Technical Author\", \"salary\": \"$86,000\", \"start_date\": \"2009/01/12\", \"office\": \"San Francisco\", \"extn\": \"1562\" }, { \"id\": \"4\", \"name\": \"Cedric Kelly\", \"position\": \"Senior Javascript Developer\", \"salary\": \"$433,060\", \"start_date\": \"2012/03/29\", \"office\": \"Edinburgh\", \"extn\": \"6224\" }, { \"id\": \"5\", \"name\": \"Airi Satou\", \"position\": \"Accountant\", \"salary\": \"$162,700\", \"start_date\": \"2008/11/28\", \"office\": \"Tokyo\", \"extn\": \"5407\" }, { \"id\": \"6\", \"name\": \"BrielleWilliamson\", \"position\": \"Integration Specialist\", \"salary\": \"$372,000\", \"start_date\": \"2012/12/02\", \"office\": \"New York\", \"extn\": \"4804\" }, { \"id\": \"7\", \"name\":\"Herrod Chandler\", \"position\": \"Sales Assistant\", \"salary\": \"$137,500\", \"start_date\": \"2012/08/06\", \"office\": \"San Francisco\", \"extn\": \"9608\" }, { \"id\": \"8\", \"name\":\"Rhona Davidson\", \"position\": \"Integration Specialist\", \"salary\": \"$327,900\", \"start_date\": \"2010/10/14\", \"office\": \"Tokyo\", \"extn\": \"6200\" }, { \"id\": \"9\", \"name\":\"Colleen Hurst\", \"position\": \"Javascript Developer\", \"salary\": \"$205,500\", \"start_date\": \"2009/09/15\", \"office\": \"San Francisco\", \"extn\": \"2360\" }, { \"id\": \"10\", \"name\": \"Sonya Frost\", \"position\": \"Software Engineer\", \"salary\": \"$103,600\", \"start_date\": \"2008/12/13\", \"office\": \"Edinburgh\", \"extn\": \"1667\" }, { \"id\": \"11\", \"name\":\"Jena Gaines\", \"position\": \"Office Manager\", \"salary\": \"$90,560\", \"start_date\": \"2008/12/19\", \"office\": \"London\", \"extn\": \"3814\" }, { \"id\": \"12\", \"name\": \"QuinnFlynn\", \"position\": \"Support Lead\", \"salary\": \"$342,000\", \"start_date\": \"2013/03/03\", \"office\": \"Edinburgh\", \"extn\": \"9497\" }, { \"id\": \"13\", \"name\": \"ChardeMarshall\", \"position\": \"Regional Director\", \"salary\": \"$470,600\", \"start_date\": \"2008/10/16\", \"office\": \"San Francisco\", \"extn\": \"6741\" }, { \"id\": \"14\", \"name\": \"HaleyKennedy\", \"position\": \"Senior Marketing Designer\", \"salary\": \"$313,500\", \"start_date\": \"2012/12/18\", \"office\": \"London\", \"extn\": \"3597\" }, { \"id\": \"15\", \"name\":\"TatyanaFitzpatrick\", \"position\": \"Regional Director\", \"salary\": \"$385,750\", \"start_date\": \"2010/03/17\", \"office\": \"London\", \"extn\": \"1965\" }, { \"id\": \"16\", \"name\":\"Michael Silva\", \"position\": \"Marketing Designer\", \"salary\": \"$198,500\", \"start_date\": \"2012/11/27\", \"office\": \"London\", \"extn\": \"1581\" }, { \"id\": \"17\", \"name\":\"PaulByrd\", \"position\": \"Chief Financial Officer (CFO)\", \"salary\": \"$725,000\", \"start_date\": \"2010/06/09\", \"office\": \"New York\", \"extn\": \"3059\" }, { \"id\": \"18\", \"name\": \"Gloria Little\", \"position\": \"Systems Administrator\", \"salary\": \"$237,500\", \"start_date\": \"2009/04/10\", \"office\": \"New York\", \"extn\": \"1721\" }, { \"id\": \"19\", \"name\":\"Bradley Greer\", \"position\": \"Software Engineer\", \"salary\": \"$132,000\", \"start_date\": \"2012/10/13\", \"office\": \"London\", \"extn\": \"2558\" }, { \"id\": \"20\", \"name\": \"DaiRios\", \"position\": \"Personnel Lead\", \"salary\": \"$217,500\", \"start_date\": \"2012/09/26\", \"office\": \"Edinburgh\", \"extn\": \"2290\" }, { \"id\": \"21\", \"name\": \"JenetteCaldwell\", \"position\": \"Development Lead\", \"salary\": \"$345,000\", \"start_date\": \"2011/09/03\", \"office\": \"New York\", \"extn\": \"1937\" }, { \"id\": \"22\", \"name\": \"YuriBerry\", \"position\": \"Chief Marketing Officer (CMO)\", \"salary\": \"$675,000\", \"start_date\": \"2009/06/25\", \"office\": \"New York\", \"extn\": \"6154\" }, { \"id\": \"23\", \"name\":\"Caesar Vance\", \"position\": \"Pre-Sales Support\", \"salary\": \"$106,450\", \"start_date\": \"2011/12/12\", \"office\": \"New York\", \"extn\": \"8330\" }, { \"id\": \"24\", \"name\":\"Doris Wilder\", \"position\": \"Sales Assistant\", \"salary\": \"$85,600\", \"start_date\": \"2010/09/20\", \"office\": \"Sidney\", \"extn\": \"3023\" }, { \"id\": \"25\", \"name\": \"AngelicaRamos\", \"position\": \"Chief Executive Officer (CEO)\", \"salary\": \"$1,200,000\", \"start_date\": \"2009/10/09\", \"office\": \"London\", \"extn\": \"5797\" }, { \"id\": \"26\", \"name\":\"Gavin Joyce\", \"position\": \"Developer\", \"salary\": \"$92,575\", \"start_date\": \"2010/12/22\", \"office\": \"Edinburgh\", \"extn\": \"8822\" }, { \"id\": \"27\", \"name\": \"JenniferChang\", \"position\": \"Regional Director\", \"salary\": \"$357,650\", \"start_date\": \"2010/11/14\", \"office\": \"Singapore\", \"extn\": \"9239\" }, { \"id\": \"28\", \"name\": \"BrendenWagner\", \"position\": \"Software Engineer\", \"salary\": \"$206,850\", \"start_date\": \"2011/06/07\", \"office\": \"San Francisco\", \"extn\": \"1314\" }, { \"id\": \"29\", \"name\": \"FionaGreen\", \"position\": \"Chief Operating Officer (COO)\", \"salary\": \"$850,000\", \"start_date\": \"2010/03/11\", \"office\": \"San Francisco\", \"extn\": \"2947\" }, { \"id\": \"30\", \"name\":\"Shou Itou\", \"position\": \"Regional Marketing\", \"salary\": \"$163,000\", \"start_date\": \"2011/08/14\", \"office\": \"Tokyo\", \"extn\": \"8899\" }, { \"id\": \"31\", \"name\": \"MichelleHouse\", \"position\": \"Integration Specialist\", \"salary\": \"$95,400\", \"start_date\": \"2011/06/02\", \"office\": \"Sidney\", \"extn\": \"2769\" }, { \"id\": \"32\", \"name\": \"SukiBurks\", \"position\": \"Developer\", \"salary\": \"$114,500\", \"start_date\": \"2009/10/22\", \"office\": \"London\", \"extn\": \"6832\" }, { \"id\": \"33\", \"name\": \"PrescottBartlett\", \"position\": \"Technical Author\", \"salary\": \"$145,000\", \"start_date\": \"2011/05/07\", \"office\": \"London\", \"extn\": \"3606\" }, { \"id\": \"34\", \"name\": \"Gavin Cortez\", \"position\":\"Team Leader\", \"salary\": \"$235,500\", \"start_date\": \"2008/10/26\", \"office\": \"San Francisco\", \"extn\": \"2860\" }, { \"id\": \"35\", \"name\": \"Martena Mccray\", \"position\":\"Post-Sales support\", \"salary\": \"$324,050\", \"start_date\": \"2011/03/09\", \"office\": \"Edinburgh\", \"extn\": \"8240\" }, { \"id\": \"36\", \"name\": \"Unity Butler\", \"position\":\"Marketing Designer\", \"salary\": \"$85,675\", \"start_date\": \"2009/12/09\", \"office\": \"San Francisco\", \"extn\": \"5384\" }, { \"id\": \"37\", \"name\": \"Howard Hatfield\", \"position\": \"Office Manager\", \"salary\": \"$164,500\", \"start_date\": \"2008/12/16\", \"office\": \"San Francisco\", \"extn\": \"7031\" }, { \"id\": \"38\", \"name\": \"Hope Fuentes\", \"position\":\"Secretary\", \"salary\": \"$109,850\", \"start_date\": \"2010/02/12\", \"office\": \"San Francisco\", \"extn\": \"6318\" }, { \"id\": \"39\", \"name\": \"Vivian Harrell\", \"position\":\"Financial Controller\", \"salary\": \"$452,500\", \"start_date\": \"2009/02/14\", \"office\": \"San Francisco\", \"extn\": \"9422\" }, { \"id\": \"40\", \"name\": \"Timothy Mooney\", \"position\": \"Office Manager\", \"salary\": \"$136,200\", \"start_date\": \"2008/12/11\", \"office\": \"London\", \"extn\": \"7580\" }, { \"id\": \"41\", \"name\": \"Jackson Bradshaw\", \"position\":\"Director\", \"salary\": \"$645,750\", \"start_date\": \"2008/09/26\", \"office\": \"New York\", \"extn\": \"1042\" }, { \"id\": \"42\", \"name\": \"Olivia Liang\", \"position\": \"SupportEngineer\", \"salary\":\"$234,500\", \"start_date\": \"2011/02/03\", \"office\": \"Singapore\", \"extn\": \"2120\" }, { \"id\": \"43\", \"name\": \"Bruno Nash\", \"position\": \"SoftwareEngineer\", \"salary\": \"$163,500\", \"start_date\": \"2011/05/03\", \"office\": \"London\", \"extn\": \"6222\" }, { \"id\": \"44\", \"name\": \"Sakura Yamamoto\", \"position\": \"SupportEngineer\", \"salary\": \"$139,575\", \"start_date\": \"2009/08/19\", \"office\": \"Tokyo\", \"extn\": \"9383\" }, { \"id\": \"45\", \"name\": \"Thor Walton\", \"position\": \"Developer\", \"salary\": \"$98,540\", \"start_date\": \"2013/08/11\", \"office\": \"New York\", \"extn\": \"8327\" }, { \"id\": \"46\", \"name\": \"Finn Camacho\", \"position\": \"Support Engineer\", \"salary\":\"$87,500\", \"start_date\": \"2009/07/07\", \"office\": \"San Francisco\", \"extn\": \"2927\" }, { \"id\": \"47\", \"name\": \"Serge Baldwin\", \"position\": \"Data Coordinator\", \"salary\":\"$138,575\", \"start_date\": \"2012/04/09\", \"office\": \"Singapore\", \"extn\": \"8352\" }, { \"id\": \"48\", \"name\": \"Zenaida Frank\", \"position\": \"Software Engineer\", \"salary\":\"$125,250\", \"start_date\": \"2010/01/04\", \"office\": \"New York\", \"extn\": \"7439\" }, { \"id\": \"49\", \"name\": \"Zorita Serrano\", \"position\": \"Software Engineer\", \"salary\":\"$115,000\", \"start_date\": \"2012/06/01\", \"office\": \"San Francisco\", \"extn\": \"4389\" }, { \"id\": \"50\", \"name\": \"Jennifer Acosta\", \"position\": \"Junior JavascriptDeveloper\", \"salary\": \"$75,650\", \"start_date\": \"2013/02/01\", \"office\": \"Edinburgh\", \"extn\": \"3431\" }, { \"id\": \"51\", \"name\": \"Cara Stevens\", \"position\": \"SalesAssistant\", \"salary\": \"$145,600\", \"start_date\": \"2011/12/06\", \"office\": \"New York\", \"extn\": \"3990\" }, { \"id\": \"52\", \"name\": \"Hermione Butler\", \"position\": \"RegionalDirector\", \"salary\": \"$356,250\", \"start_date\": \"2011/03/21\", \"office\": \"London\", \"extn\": \"1016\" }, { \"id\": \"53\", \"name\": \"Lael Greer\", \"position\": \"SystemsAdministrator\", \"salary\": \"$103,500\", \"start_date\": \"2009/02/27\", \"office\": \"London\", \"extn\": \"6733\" }, { \"id\": \"54\", \"name\": \"Jonas Alexander\", \"position\":\"Developer\", \"salary\": \"$86,500\", \"start_date\": \"2010/07/14\", \"office\": \"San Francisco\", \"extn\": \"8196\" }, { \"id\": \"55\", \"name\": \"Shad Decker\", \"position\":\"Regional Director\", \"salary\": \"$183,000\", \"start_date\": \"2008/11/13\", \"office\": \"Edinburgh\", \"extn\": \"6373\" }, { \"id\": \"56\", \"name\": \"Michael Bruce\", \"position\":\"Javascript Developer\", \"salary\": \"$183,000\", \"start_date\": \"2011/06/27\", \"office\": \"Singapore\", \"extn\": \"5384\" }, { \"id\": \"57\", \"name\": \"Donna Snider\", \"position\": \"Customer Support\", \"salary\": \"$112,000\", \"start_date\": \"2011/01/25\", \"office\": \"New York\", \"extn\": \"4226\" } ] "
};
var self = this;
self.GridConfiguration = ko.observable();
self.Columns = null;
self.Data = null;
self.ColumnDefinitions = null;
self.SelectedItem = null;
self.Columns = ko.observableArray([]);
self.ColumnDefinitions = ko.observableArray([]);
var selectColumn = {};
selectColumn.targets = 0;
selectColumn.data = null;
selectColumn.orderable = false;
selectColumn.className = 'select-checkbox';
selectColumn.data = null;
self.SelectedItem = ko.observable('test1');
this.SelectedC = ko.pureComputed({
read: function () {
return this.SelectedItem();
},
write: function (value) {
this.SelectedItem(value);
},
owner: this
});
self.ColumnDefinitions.push(selectColumn);
self.Order = ko.observableArray([]);
self.Order = [[2,'asc']];
self.Select = ko.observable();
self.Select = ({
style:'single'});
self.Columns.push({data:null, title:'', searchable:false, visible:true, orderable:false, defaultContent: ''});
var columns = JSON.parse(gridConf.Columns);
$.each( columns, function( key, value ) {
var my_item = {};
my_item.data = value['field'];
my_item.title = value['displayName'];
my_item.visible = value['visible'];
if(value['visible'] === false){
my_item.searchable = false;
my_item.title = '';
}
self.Columns.push(my_item);
});
var gridData;
if(gridC != null)
gridData = JSON.parse(gridC);
else
gridData = JSON.parse(gridConf.Data);
self.initialData = ko.observableArray([]);
self.initialData(gridData);
self.GridData = ko.pureComputed({
read: function () {
return this.initialData();
},
write: function (value) {
this.initialData(value);
},
owner: this
});
};
function Redraw(){
var gridConf = {
"Columns": "[{\"displayName\":\"Id\",\"field\":\"id\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":false},{\"displayName\":\"Name\",\"field\":\"name\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Position\",\"field\":\"position\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Office\",\"field\":\"office\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Extn\",\"field\":\"extn\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"StartDate\",\"field\":\"start_date\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true},{\"displayName\":\"Salary\",\"field\":\"salary\",\"width\":\"auto\",\"dataType\":\"string\",\"template\":\"\",\"visible\":true}]",
"Data":"[{ \"id\": \"1\", \"name\": \"Tiger Nixon\", \"position\": \"System Architect\", \"salary\": \"$320,800\", \"start_date\": \"2011/04/25\", \"office\": \"Edinburgh\", \"extn\": \"5421\" }, { \"id\":\"2\", \"name\": \"Garrett Winters\", \"position\": \"Accountant\", \"salary\": \"$170,750\", \"start_date\": \"2011/07/25\", \"office\": \"Tokyo\", \"extn\": \"8422\" }, { \"id\": \"3\", \"name\": \"Ashton Cox\", \"position\": \"Junior Technical Author\", \"salary\": \"$86,000\", \"start_date\": \"2009/01/12\", \"office\": \"San Francisco\", \"extn\": \"1562\" }, { \"id\": \"4\", \"name\": \"Cedric Kelly\", \"position\": \"Senior Javascript Developer\", \"salary\": \"$433,060\", \"start_date\": \"2012/03/29\", \"office\": \"Edinburgh\", \"extn\": \"6224\" }, { \"id\": \"5\", \"name\": \"Airi Satou\", \"position\": \"Accountant\", \"salary\": \"$162,700\", \"start_date\": \"2008/11/28\", \"office\": \"Tokyo\", \"extn\": \"5407\" }, { \"id\": \"6\", \"name\": \"BrielleWilliamson\", \"position\": \"Integration Specialist\", \"salary\": \"$372,000\", \"start_date\": \"2012/12/02\", \"office\": \"New York\", \"extn\": \"4804\" } ] "
};
//ko.cleanNode($('#lookupData'));
if ($.fn.DataTable.isDataTable('#lookupData')) {
var dt = $('#lookupData').DataTable();
dt.clear();
//dt.destroy(true);
//$('#lookupData').empty();
}
var vm = new viewmodel(gridConf.Data);
//dt.ajax.reload( null, false );
//$('#lookupData').DataTable();
}
var vm = new viewmodel()
ko.applyBindings(vm);
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox
{
width:0!important;
height:0!important;
border: 0 !important;
}
<link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table id="lookupData" data-bind="dataTable: { scrollY: '200', destroy:true, scrollX: true, order:Order, paging: true, select:Select, dom:'t,p', columns:Columns, columnDefs:ColumnDefinitions, data:GridData, pagingType: 'full' }" class="stripe row-border order-column" cellspacing="0" width="100%">
</table>
<span data-bind="text: ko.toJS(SelectedC).name"></span>
<button id="btnRedrawGrid" data-bind="click:Redraw">Redraw</button>