Метод jQWidgets jqxDataTable isBindingCompleted()

Опубликовано: 31 Декабря, 2022

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

Метод isBindingCompleted() используется для проверки того, выполнена ли привязка. В случае, если вывод верен, тогда можно вызвать методы и установить свойства. Однако, если вывод ложный и вызывается метод или устанавливается свойство, виджет выдаст исключение. У него нет параметров. Он возвращает логическое значение.

Синтаксис:

var isCompleted = $("#Selector")
    .jqxDataTable("isBindingCompleted");

Связанные файлы: Загрузите 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 isBindingCompleted() в 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
            isBindingCompleted() Method
        </h3>
  
        <div id="jqxdt"></div>
  
        <input type="button" style="margin:29px;" 
               id="jqxbtn" value="Click here" />
        <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 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",
                    },
                ],
            });
            $("#jqxbtn").jqxButton({
                width: 280
            });
            $("#jqxbtn").on("click", function () {
                var ibc = $("#jqxdt")
                    .jqxDataTable("isBindingCompleted");
                $("#log").text("Binding done: " + ibc);
            });
        });
    </script>
</body>
  
</html>

Выход:

Пример 2. Ниже приведен еще один пример метода jqxDataTable isBindingCompleted() в 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
            isBindingCompleted() Method
        </h3>
  
        <div id="jqxdt"></div>
  
        <input type="button" style="margin:29px;" 
               id="jqxbtn" value="Click here" />
        <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 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",
                    },
                ],
            });
            $("#jqxbtn").jqxButton({
                width: 280
            });
            $("#jqxbtn").on("click", function () {
                var ibc = $("#jqxdt")
                    .jqxDataTable("isBindingCompleted");
                if (ibc === false) {
                    $("#log").text("false!");
                }
                else {
                    $("#log").text("Binding completed!");
                }
            });
        });
    </script>
</body>
  
</html>

Выход:

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