製造業ポータルサイト
WIXデータベース 検索システム構築・・・①
全件データ検索の製作解説
編集画面のDev Modeを有効にすると画面の一番下に編集画面が表示されます。
最初の記入内容を全て削除して、以下のコードをコピーして貼り付けます。
import wixData from 'wix-data';
let debounceTimer;
$w.onReady(function () {
$w("#dataset1").onReady( () => {
let count = $w("#dataset1").getTotalCount();
$w("#totalText").text = 'Total: ' + count;
$w("#companyRepeater").onItemReady( ($item, itemData, index) => {
$item("#companyNameText").text = itemData.title;
$item("#gyoText").text = itemData.kubun;
$item("#areaText").text = itemData.area;
$item("#naiyoText").text = itemData.Company_profile;
$item("#companyImage").src = itemData.image01;
$item("#companyImage").tooltip = itemData.title;
$item("#companyImage").link = itemData.url;
});
});
});
let lastFilterName;
async function filter(title) {
if(lastFilterName !== title) {
let newFilter = wixData.filter();
if(title)
newFilter = newFilter.contains('title', title);
await $w("#dataset1").setFilter(newFilter);
let count = $w("#dataset1").getTotalCount();
$w("#totalText").text = 'Total: ' + count;
setVariables(title);
}
}
function setVariables(title) {
lastFilterName = title;
}
データベース内のデータ取得と表示
データ取得数をカウントして表示する
データ表示BOX、Repeaterにデータを送る
WIX画面での設定は、データコネクトのみ
現状の検索フィールドはtitle（会社名）です。
そして、検索結果の該当データ数をカウントしたデータ数
を割り当てる。
例えば、1ページの最大表示数が6で、検索結果総数が12の場合は、2ページに分割されて検索結果が表示されるので、閲覧時は一番下に
46 と表示され一番下にあるページをめくると全件が閲覧できる。
左側メニューのコンテンツマネージャーからデータセットを追加します。
最初作成すると #dataset1 が出来ていることを確認します。
データセットの設定からコレクションを接続で作成したデータベースを選択します。
#〇〇〇は入力ボックスや画像を追加配置したりすると、その部品の左上に黒字で小さく出てます。
その部品をクリックするとDev Mode編集画面に#〇〇〇が見つかりますので、名称が変更できます。
itemDataはデータベースの各フィールドです。
先ほどのデータセットのコンテンツ管理からデータベースを開き、
各フィールの上部を右クリックして、プロパティーで値が参照できます。
この場合、フィールド名は会社名にしてますが、値は titleとしてます。
これらを全て編集します。
検索結果一覧
検索結果数
