2016-02-23 7 views
0

Я инициализировал данные, данные json на странице готовы. Теперь в событии клика я хочу изменить данные таблицы. Когда я использую delete(), возникает ошибка, указывающая «undefuned style», и объект таблицы все еще можно увидеть на странице. Вот код:datatable 1.10.4 delete not working

** JS: **

function createTable(obj){ 

var myTableDiv = document.getElementById("populate_table"); 
var table = document.createElement('TABLE'); 
table.id='dynamictable'; 

var header = table.createTHead(); 
var row = header.insertRow(0); 
var cell = row.insertCell(0); 
cell1 = row.insertCell(1); 
cell2 = row.insertCell(2); 
cell3 = row.insertCell(3); 
cell4 = row.insertCell(4); 
cell5 = row.insertCell(5); 
cell6 = row.insertCell(6); 
cell7 = row.insertCell(7); 
cell8 = row.insertCell(8); 

cell.innerHTML = "<b>Title</b>"; 
cell1.innerHTML = "<b>Qualificatoin</b>"; 
cell2.innerHTML = "<b>Salary</b>"; 
cell3.innerHTML = "<b>Company Name</b>"; 
cell4.innerHTML = "<b>Tags</b>"; 
cell5.innerHTML = "<b>Location</b>"; 
cell6.innerHTML = "<b>Experience</b>"; 
cell7.innerHTML = "<b>About Company</b>"; 
cell8.innerHTML = "<b>Apply Here</b>"; 

var tableBody = document.createElement('TBODY'); 
table.appendChild(tableBody); 
console.log("json length : "+obj.length); 

for (var i=0; i<obj.length; i++){ 
/*var tr = document.createElement('TR'); 
tableBody.appendChild(tr); 

    var td = document.createElement('TD'); 
    //td.width='75'; 
    td.appendChild(document.createTextNode("Cell " + i + "," + j)); 
    tr.appendChild(td);*/ 
var btn = document.createElement("BUTTON"); 
var t = document.createTextNode("CLICK ME"); 
btn.appendChild(t); 
btn.id='apply-button'; 

var input = document.createElement("input"); 
input.setAttribute("id",obj.firstName); 
input.setAttribute("type", "hidden"); 
input.setAttribute("name", "jobID"); 
input.setAttribute("value", obj.firstName); 

    var rowCount = tableBody.getElementsByTagName("tr").length; 

var row1 = tableBody.insertRow(rowCount); 
row1.id="x"; 

var rowcell0=row1.insertCell(0); 
var rowcell1=row1.insertCell(1); 
var rowcell2=row1.insertCell(2); 
var rowcell3=row1.insertCell(3); 
var rowcell4=row1.insertCell(4); 
rowcell4.id='doit'; 
var rowcell5=row1.insertCell(5); 
var rowcell6=row1.insertCell(6); 
var rowcell7=row1.insertCell(7); 
var rowcell8=row1.insertCell(8); 
var rowcell9=row1.insertCell(9); 

rowcell0.innerHTML= obj[i].title; 
rowcell1.innerHTML= obj[i].qualification; 
rowcell2.innerHTML= obj[i].salary; 
rowcell3.innerHTML=obj[i].companyName; 
rowcell4.innerHTML=obj[i].tags; 
rowcell5.innerHTML=obj[i].location; 
rowcell6.innerHTML=obj[i].experience; 
rowcell7.innerHTML=obj[i].aboutCompany; 
//rowcell8.innerHTML=obj[i].firstName; 
rowcell9.innerHTML=obj[i].jobID; 
//document.getElementById("doit").appendChild(btn); 
}if(data_table==="flag"){ myTableDiv.appendChild(table); 

data_table=$('#dynamictable').DataTable({ 
     "paging" : true, 
     "ordering" : true, 
     "info" : false, 
     "searching" : true, 
     "bDestroy" : true, 
     "columnDefs": [ 
     { 
      "targets": [ 9 ], 
      "visible": false, 
      "searchable": false 
     },{ 
     "targets": 8, 
     "data": null, 
     "defaultContent": "<button>Apply</button>" 
    } 
    ] 
    }); 
} 
else{ 
     data_table.destroy(); 
    //  $('#dynamictable').empty(); 
} 

    $('#dynamictable tbody').on('click', 'button', function() { 
    var data = data_table.row($(this).parents('tr')).data(); 
    var formData=data[9]; 
    console.log("The data : "+data[9]); 
    $.ajax({ 
      type : "GET", 
      url : "apply", 
      data:"jobID="+formData, 
      dataType : "text", 
      async: true, 
      success : function(response) { 

       console.log("The response : "+response); 
      } 
     }); 
    }); 
};}); 
+0

где вы хотите удалить событие click в своем коде? – msvairam

+0

@msvairam: Извинения ... пожалуйста, загляните в код сейчас ... Я его отредактировал .. Спасибо – coolmego

ответ

0

Для DataTables не использую удалить(). Это код, который я использую при удалении выбранной строки:

$("#delete_button").on('click', function(data) { 
    data_table.row('.active').remove().draw(false); 
}); 
+0

Привет, Og Ramos: Uncaught TypeError: Не могу прочитать свойство 'style' undefined ... Это ошибка i войдите в jquery.dataTables.min.js: 58 – coolmego

+0

Сделайте jsfiddle и давайте работать над этим. https://jsfiddle.net –

+0

В верхней части моей головы ошибка возникает, когда количество столбцов, которые у вас есть в инициализации с данными, не совпадает с числом в и/или . Убедитесь, что у вас одинаковое количество столбцов. –