2013-12-03 2 views
-1

Я создал динамическую таблицу HTML. И теперь я хочу преобразовать эту таблицу в jQuery DataTables.Как преобразовать динамически сгенерированную таблицу в DataTable с помощью JavaScript или jQuery?

Есть ли какие-либо возможные способы для этого?

Здесь я прикрепил свои динамические HTML table.

<html> 
<body> 
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.js"></script> 
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script> 
     <table > 
      <tr> 
       <td>Enter Rows</td> 
       <td><input type="number" id="txtRows"/></td> 
      </tr> 
      <tr> 
       <td>Enter Columns</td> 
       <td><input type="number" id="txtCols"/></td> 
      </tr> 
      <tr> 
       <td colspan="2"><input type="button" id="btnDisplay" value="Display" onClick="ShowTable();"/></td> 
      </tr> 
     </table> 
     <table id="tbl_DynamicTable" border="1" style="display:none"> 
     </table> 
    </body> 

<script type="text/JavaScript"> 

     function ShowTable() 
     { 
     debugger; 
      document.getElementById("tbl_DynamicTable").style.display = ""; 
      createTable(); 
     } 

     function createTable() 
      { 
      debugger; 
       var rows = document.getElementById("txtRows").value; 
       var cols = document.getElementById("txtCols").value; 
       var table = document.getElementById("tbl_DynamicTable"); 
       var str=""; 

       var randomColor; 
       for(var i=0;i<rows;i++) 
       { 
        randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); 
        str += "<tr id=row" + i +" bgcolor="+randomColor+">"; 

        for(var j=0;j<cols;j++) 
        { 
         if(i==0) 
         { 
          str += "<th> Header " + j + "</th>"; 
         } 
         else 
         { 
          str += "<td> Row " + i + ", Cell "+ j + "</td>"; 
         } 
        } 
        str += "</tr>"; 
       } 
       table.innerHTML = str; 
      } 
    </script> 

</html> 

Теперь как преобразовать эту таблицу в DataTable jQuery?

+0

Я не знаю, как это сделать. Подождите, позвольте мне поместить здесь код моей динамической таблицы HTML. –

ответ

0

Попробуйте этот пример:

вне функции вы объявляете OTABLE.

var oTable; 

Внутри функции после создания HTML-таблицы:

if(oTable.length>0) 
     oTable.fnDestroy(); 


    oTable=$("tableid").dataTable({ 
        "sDom": '<"top"i>rt<"bottom"flp><"clear">', 
        "sScrollY":500, 
        "bScrollCollapse": true, 
        "bPaginate": true, 
        "bFilter": true, 
        "bSort": true, 
        "bInfo": false, 
        "bSortClasses": false 
       }); 
0

При добавлении каждой динамической строки нажать, что в массив, и он будет хранить информацию и после этого вы можете отправить Databse

+0

Ну, теперь вы можете увидеть мой код. Пожалуйста, дайте мне знать, если есть способ. –

+0

ну, создайте переменную Array как: var items = {details []}; затем создайте одну функцию и вызовите эту функцию, когда вы нажмете кнопку «Отправить», в этой функции, используя ajax, нажмите элементы массива. например: items.details.push ({item1, item2}), в конце вы будете иметь все элементы в массиве и отправить его в базу данных –

Смежные вопросы