jQWidgets jqxDataTable отображаемое свойство
jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.
Оказание Свойство является функцией обратного вызова, которая вызывается всякий раз, когда отображается строка отображаемой таблицы jqxDataTable. Это функциональный тип, и его значение по умолчанию — «null».
Синтаксис:
Установите отображаемое свойство.
$("Selector").jqxDataTable({ rendered: null });Вернуть визуализированный имущество.
var rendered = $("Selector").jqxDataTable("rendered");Связанные файлы: Загрузите 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 rendered 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="jqxbutton_for_rendered" value="Click here" /> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { $("#Data_Table").jqxDataTable({ rendered: function () { $("#jqxbutton_for_rendered"). 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 }] }); $("#jqxbutton_for_rendered").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 rendered 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({ rendered: 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( "rendered" ); if (r != null) { $("#log").text("Rendered!"); } else { $("#log").text(r); } }); }); </script></body></html> |
Выход:
Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm