jQWidgets Событие привязки jqxDataTableComplete
jQWidgets — это JavaScript-фреймворк для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. jqxDataTable используется для чтения и отображения данных из таблицы HTML. Это также используется для отображения данных из различных источников данных, таких как XML, JSON, Array, CSV или TSV.
Событие bindingComplete отображаемой таблицы jqxDataTable активируется сразу после завершения процесса привязки данных.
Синтаксис:
$("Selector").on("bindingComplete", function (event) {
// Code
});Связанные файлы: Загрузите 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 bindingComplete в 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-1.11.1.min.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 bindingComplete Event </h3> <br/> <div id="jqxdt"></div> <br/> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { var d = new Array(); var subjectNames = ["C++", "Scala", "Java", "C", "R", "JavaScript"]; var pageNumber = ["7", "8", "12", "11", "10", "19"]; for (var j = 0; j < 6; j++) { var r = {}; r["subjectnames"] = subjectNames[Math.floor( Math.random() * subjectNames.length)]; r["pagenumber"] = pageNumber[Math.floor( Math.random() * pageNumber.length)]; d[j] = r; } var src = { localdata: d, datatype: "array", }; $("#jqxdt").on("bindingComplete", function (event) { $("#log").text("Binding is done!"); }); var data_Adapter = new $.jqx.dataAdapter(src); $("#jqxdt").jqxDataTable({ source: data_Adapter, sortable: true, columns: [ { text: "Subject Name", datafield: "subjectnames", width: "120px", }, { text: "Page No.", datafield: "pagenumber", width: "120px", }, ], }); }); </script></body></html> |
Выход:
Пример 2. Ниже приведен еще один пример события привязки 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-1.11.1.min.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 bindingComplete Event </h3> <br /> <div id="jqxdt"></div> <br /> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { var d = new Array(); var subjectNames = ["C++", "Scala", "Java", "C", "R", "JavaScript"]; var pageNumber = ["7", "8", "12", "11", "10", "19"]; for (var j = 0; j < 6; j++) { var r = {}; r["subjectnames"] = subjectNames[Math.floor( Math.random() * subjectNames.length)]; r["pagenumber"] = pageNumber[Math.floor( Math.random() * pageNumber.length)]; d[j] = r; } var src = { localdata: d, datatype: "array", }; $("#jqxdt").on("bindingComplete", function (event) { var args = event.args; if (args === null) { $("#log").text("Null!"); } else { $("#log").text("Binding Completed!"); } }); var data_Adapter = new $.jqx.dataAdapter(src); $("#jqxdt").jqxDataTable({ source: data_Adapter, sortable: true, columns: [ { text: "Subject Name", datafield: "subjectnames", width: "120px", }, { text: "Page No.", datafield: "pagenumber", width: "120px", }, ], }); }); </script></body> </html> |
Выход:
Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm