養生材等の発注管理システムを作成しましたが、datatablesを用いると、ヘッダーが横方向に移動しない?!

頻出する提携作業に関しては、やはり定型化すると会社全体としては効率的に動けます。

ということで、色々なタイミングが合ったので、養生関係の発注を会社として整理を図りました。

その際、エクセルで一覧表を作って、利用・発注の際はそれを見ながら、でもいいと思ったものの、コードの転記、内容の確認、金額計算などをスムーズに実施するために会社のシステムに組み込むことにしました。

とりあえず出来ました。

というわけで、数日かけて実装が完了しました。

どんな養生材等があり、どのような用途で、いくらで、発注時の必要なコードが発注書に転記され、合計金額が計算され、送料の計算もされるようにしました。

これで、ホームセンターに走って、色々なものを都度都度購入して…よりも格段に効率化が図れました。

更新とかはどうしよう…。

まず作った更新画面。

マスタの更新には、DB手打ちでも良かったんですが、未来の自分が楽するために、マスタに対する更新、新規追加機能を実装しました。

datatablesを重宝し、非常に便利に利用しているものの、

lengthMenu: [ 8, 20, 30 ],
displayLength: 8,
bPaginate: true,

らへんを利用し、ページングをしていると、表示されている件数しか、POSTされない事実に直面しました。

これでは、ページングの件数を超えたレコードは更新できないので、色々と対処法はあるような感じでしたが、ページングを諦めることとしました。

それでは、縦幅固定!

今度は全件表示をしつつ、縦方向を指定して画面内でスクロールが収まるように変更しました。

scrollY : “400px”,
scrollCollapse : true,

ヘッダーが横方向について来ない?!

よし、これで全件POSTで拾えると思ったものの、今度はヘッダーが横方向のスライドについてこない事象に。

theadで囲んだ行が固定され、tbodyは動くものの、theadが動かない!

色々と確認したものの、ちゃんとしたoptionを指定すれば良かったようで…。

scrollX : true,
scrollY : “400px”,
scrollCollapse : true,

scrollXを指定することで、ちゃんと横方向のスクロールについてくるようになりました。

datatablesは非常に重宝するプラグインですが、まだまだ奥が深い。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です