Свойство jQWidgets jqxDataTable renderStatusbar
jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.
Свойство renderStatusbar является функцией обратного вызова и используется для персонализации возврата отображаемой строки состояния jqxDataTable. Это функциональный тип, и его значение по умолчанию равно null.
Синтаксис:
Установите свойство renderStatusbar :
$("Selector").jqxDataTable({ renderStatusbar: null });Верните свойство renderStatusbar :
var renderStatusbar = $("Selector")
.jqxDataTable("renderStatusbar");Связанные файлы: Загрузите 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 renderStatusbar в 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 renderStatusbar 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({ showStatusbar: true, renderStatusBar: function (sb) { $("#jqxbtn").click(function () { var holder = $("<div></div>"); var range = $("<span>...Statusbar...</span>"); sb.append(holder); holder.append(range); $("#log").text("Customized statusbar rendered!") }); }, 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 renderStatusbar , для которого задано значение «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 renderStatusbar 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({ showStatusbar: true, renderStatusBar: 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( "renderStatusBar" ); if (r != null) { $("#log").text("Statusbar Rendered!"); } else { $("#log").text(r); } }); }); </script></body> </html> |