Как я могу преобразовать динамически сгенерированную таблицу в DataTable, используя JavaScript или jQuery?

Question

Как я могу преобразовать динамически сгенерированную таблицу в DataTable, используя JavaScript или jQuery?

0

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

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

Здесь я прикрепил свою динамическую 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>

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

Mr.G 03 дек. 2013, в 10:37

Источник

0

Я понятия не имею, как это сделать. Подождите, позвольте мне поместить код динамической таблицы моего HTML здесь.
user2898127 03 дек. 2013, в 09:20

Теги:

javascript

jquery

html

jquery-datatables

2 ответа

Ещё вопросы

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

Mr.G · Answer 1 · 2013-12-03T06-25-00.000Z

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

вне функции, которую вы объявляете 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
                });

Praveen M P · Answer 2 · 2013-12-03T07-05-00.000Z

Добавляя каждое динамическое нажатие строки в массив, и оно будет хранить данные, и после этого вы можете отправить в базу данных

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