Свойство рендеринга jQWidgets jqxDataTable

Опубликовано: 3 Января, 2023

jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.

Рендеринг свойство — это функция обратного вызова, которая вызывается перед возвратом строк отображаемой таблицы jqxDataTable. Это функциональный тип, и его значение по умолчанию — «null».

Синтаксис:

Установить рендеринг имущество.

$("Selector").jqxDataTable({ rendering: null });

Вернуть рендеринг имущество.

var rendering = $("Selector").jqxDataTable("rendering");

Связанные файлы: Загрузите jQWidgets по данной ссылке. В файле HTML найдите файлы сценариев в загруженной папке.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>

Пример 1. Пример ниже иллюстрирует рендеринг jqxDataTable. свойство в jQWidgets.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
          "jqwidgets/styles/jqx.base.css" 
          type="text/css"/>
    <script type="text/javascript" 
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxlistbox.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxDataTable rendering Property
        </h3>
        <div id="#Data_Table"></div>
        <table id="Data_Table" border="1">
            <thead>
                <tr>
                    <th>Employee_Name</th>
                    <th>Company</th>
                    <th>Designation</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Rohit</td>
                    <td>GeeksforGeeks</td>
                    <td>HR</td>
                </tr>
                <tr>
                    <td>Rahul</td>
                    <td>Capgemini</td>
                    <td>Software Engineer</td>
                </tr>
                <tr>
                    <td>Vivek</td>
                    <td>CESC</td>
                    <td>Electrical Engineer</td>
                </tr>
                <tr>
                    <td>Amit</td>
                    <td>Apple</td>
                    <td>Manager</td>
                </tr>
            </tbody>
        </table>
  
        <input type="button" style="margin:29px;" 
               id="jqxbtn" value="Click here" />
        <div id="log"></div>
    </center>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Data_Table").jqxDataTable({
                rendering: function () {
                    $("#jqxbtn").
                        click(function () {
                            $("#log").text("Function invoked!")
                        });
                },
                columns: [{
                    text: "Employee_Name",
                    dataField: "Employee_Name",
                    width: 190
                }, {
                    text: "Company",
                    dataField: "Company",
                    width: 160
                }, {
                    text: "Designation",
                    dataField: "Designation",
                    width: 190
                }]
            });
            $("#jqxbtn").jqxButton({
                width: 280
            });
        });
    </script>
</body>
</html>

Выход:

Пример 2. Ниже приведен еще один пример рендеринга jqxDataTable. свойство, для которого установлено значение «null».

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
          "jqwidgets/styles/jqx.base.css" 
          type="text/css"/>
    <script type="text/javascript" 
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxlistbox.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3> jQWidgets jqxDataTable rendering Property
        </h3>
        <div id="#Data_Table"></div>
        <table id="Data_Table" border="1">
            <thead>
                <tr>
                    <th>Employee_Name</th>
                    <th>Company</th>
                    <th>Designation</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Rohit</td>
                    <td>GeeksforGeeks</td>
                    <td>HR</td>
                </tr>
                <tr>
                    <td>Rahul</td>
                    <td>Capgemini</td>
                    <td>Software Engineer</td>
                </tr>
                <tr>
                    <td>Vivek</td>
                    <td>CESC</td>
                    <td>Electrical Engineer</td>
                </tr>
                <tr>
                    <td>Amit</td>
                    <td>Apple</td>
                    <td>Manager</td>
                </tr>
            </tbody>
        </table>
  
        <input type="button" style="margin: 29px;" 
               id="jqxBtn" value="Click here" />
        <div id="log"></div>
    </center>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Data_Table").jqxDataTable({
                rendering: null,
                columns: [{
                    text: "Employee_Name",
                    dataField: "Employee_Name",
                    width: 190
                }, {
                    text: "Company",
                    dataField: "Company",
                    width: 160
                }, {
                    text: "Designation",
                    dataField: "Designation",
                    width: 190
                }]
            });
            $("#jqxBtn").jqxButton({
                width: 280
            });
            $("#jqxBtn").on("click", function () {
                var r = $("#Data_Table").jqxDataTable(
                    "rendering"
                );
                if (r != null) {
                    $("#log").text("Rendering!");
                }
                else {
                    $("#log").text(r);
                }
            });
        });
    </script>
</body>
</html>

Выход:

Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm