Skip to main content

In-Place editing with X-Editable using Datatable plugin

Introduction
In-place editing is a trending feature that can be seen in many latest web applications, a popular example would be trello.com where the editing data happens on the web page without any explicit forms or popups. Another such example I could point out is, thoughtplan.com. The in-place editing is very nice in such a way that editing data seems so natural and user friendly.

To enable in-place editing, there are many free JQuery plugins available on the internet. We are discussing a very popular plugin called x-editable. Most of the time we use html tables to display data where in-place editing is enabled. Hence we need another plugin to elegantly display tables with enormous data. We use a famous JQuery plugin called datatable. Both of these plugins are used widely and free to use.

Assumption      : Bootstrap 3, JQuery used Projects

Integration
In order to enable datatable features on any ordinary table found on web page, we should initialise datatable plugin for that table. It's simply a call on the id or class selector of the table. x-editable plugin can be initialized on each field on any table that requires in-place editing. The initialization of x-editable plugin is same as datatable plugin, i.e, id or class selector of the field should be initialized with x-editable plugin. With that you are good to go in-place editing on datatable.

Challenges
One of the many features provided by datatable is pagination. While we integrate x-editable plugin with datatable, often we forget to see how the plugin works on the rows that are hidden by the datatable pagination feature. Hence the in-place editing is not working on the paginated rows or in other words, the rows in the next page. To mitiage such issues, we will need to use the datatable plugin features or api to initialize the in-place editing on all rows hidden by pagination.

Solution
What we proposed to solve this issue is to use drawCallback function option on the datatable object so when each row is drawn, we can decide what should be done with the rows. In this case, we are trying to initialise x-editable plugin on all editable items/fields in all the rows of the datatable. Below is the drawCallback function used for this purpose on datatable object. You can see how the x-editable plugin is initialised on all editable items of all rows. We have used class name selector for the editable field/column.

Code Snippets
$('#CVUsers').DataTable({
                "pagingType": "simple",
                drawCallback: function(settings){
                          var api = this.api();
                          var csrfHeader = $("meta[name='_csrf_header']").attr("content");
                          var csrfToken = $("meta[name='_csrf']").attr("content");

                          $('.editable-action', api.table().body())
                             .editable({
                                         type : 'select',
                                         source : MAKINUSCV.baseURL + '/admin/user/list/action.mk',
                                         url : MAKINUSCV.baseURL + '/admin/user/list/do/action.mk',
                                         ajaxOptions: {
                                             beforeSend: function (xhr){ xhr.setRequestHeader(csrfHeader, csrfToken); }
                                         },
                                         success : function(response, newValue) {
                                          if (response.status == 'error')
                                           return response.msg;
                                         }
                             }).on('hidden', function(e, reason) {
                                   if(reason === 'save') {
                                       api.rows().invalidate('dom').draw();
                                   }
                             });
                },
                responsive: {
                       details: {
                          display: $.fn.dataTable.Responsive.display.childRowImmediate,
                          type: ''
                       }
                }
 });

The above solves two issues inherent on in-place editing with datatable. First, all rows on all pages are enabled with x-editable feature, and secondly, datatable dom is updated hence the sorting or search can find the updated data after editing.

Comments

  1. I have to thank you for the efforts you've put in penning this website. I am hoping to check out the same high-grade content from you in the future as well. In truth, your creative writing abilities has encouraged dev me to get my own, personal website now ;)

    ReplyDelete
  2. Thanks for sharing informative post. Tamil typing online is the best tool to translate Tamil to English fast and easy. Tamil typing Software download | Bamini to Unicode

    ReplyDelete
  3. Thanks for your excellent article. It is so good to read a new article.
    ms excel interview questions
    hacking books

    ReplyDelete
  4. It is time to clarify the continuing doubts you have about the difference between CBD Cannabis and hemp

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. The largest, including thousands more every day With games that start every second, lovePoker is the only place that collects
    poker online games from many, be it Upoker, Pppoker, PokerBros, Pokerstars, Sharkscope, Siampoker, Dafabet, IDN Poker, or well known Thai people

    ReplyDelete
  7. it is not the most popular on this list, but fans do love its benefits ดูบอลฟรี . One of these is that no sign up is required, but you can sign up for free to get some convenient options. For instance, it provides intelligent content recommendations and a calendar for you to set up reminders. That way, you never miss your favorite live content. If you do miss it, though, you can always pull it up on Duball24hrs.com recordings.

    ReplyDelete
  8. ufabet Online Gambling Sites The most perfect And is the most popular service in Thailand and Asia. UFABET has been set from UEFA Bet as the first and only. Online football betting website This is regarded as The best and most stable online gambling site Members praise us to be The best online betting sites based on reviews on social media. And many members Choose to use an online gambling service on our website. And of course the number of members of This online gambling site. Increase at a very high rate

    ReplyDelete
  9. The best redemption option is to receive your cash back into a SunTrust Bank account. This may make the program less valuable if you want more options to maximize rewards.

    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com
    inewshunter.com

    ReplyDelete
  10. The amount a family receives is based on income. To qualify for the expanded child care tax payments, families must earn an adjusted gross income that does not exceed $150,000 if married and filing jointly or $75,000 for individuals. Families earning a combined adjusted gross income of more than $400,000 will see their credits incrementally reduced to less than $2,000 per child.

    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com
    juicyfactor.com

    ReplyDelete
  11. "The cities will oftentimes tax everything you get except Social Security," says Paul Joseph, a CPA and co-owner of financial firm Joseph & Joseph Tax and Payroll in Williamston, Michigan.

    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com
    localnewsbuzz.com

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Much obliged for sharing a Information to us. Assuming somebody need to think about Blog...

    AWS Training in Hyderabad

    ReplyDelete
  14. There's also a wide range of modifiers. Tasklist -svc shows services related to each task, use tasklist -v to obtain more detail on each task, and tasklist -m will locate DLL files associated with active tasks. These commands are useful for advanced troubleshooting.

    Economy
    Education
    Entertainment
    Fashion & Beauty
    Apps
    Business
    Digital Marketing
    Economy

    ReplyDelete
  15. Thanks. Don't you think it's worth posting these thoughts on Instagram? After all, this social network is now very popular. By the way, I advise you to buy instagram likes in order to quickly increase their number and promote your account to the top.

    ReplyDelete
  16. ต้องการให้คุณนั้นเข้ามาสัมผัสเว็บไซต์แทงหวยที่มีคุณภาพลงทะเบียนเป็นสมาชิกกับทางพวกเรานี้เว็บไซต์แทงหวย ลอตเตอรี่ฮานอย ยอดนิยมเยอะที่สุด แล้วก็ติดอันดับ 1 ของเว็บไซต์ลอตเตอรี่ เมืองไทย ยืนยันจากผู้ใช้งาน รับประกันจ่ายจริง แทงหวยออนไลน์ อัตราจ่ายสูง ไม่หัก จ่ายเต็ม แม้ท่านกำลังมองหาเว็บไซต์แทงหวยที่เหมาะสมที่สุด เว็บไซต์ของพวกเราเป็นเว็บไซต์ที่เยี่ยมที่สุดแล้ว เปิดให้แทงหวยตลอด 1 วัน ให้อัตราการจ่ายที่สุดสูงที่สุด ให้ท่านสูงที่สุด เว็บไซต์ของพวกเรานั้นมากับคณะทำงานที่มีคุณภาพ แทงหวย ให้บริการอย่างเต็มใจ ลอตเตอรี่ฮานอย เอาใจใส่ทุกรายละเอียด เว็บไซต์ที่ยอดเยี่ยม เว็บไซต์ที่คุณนั้นไม่สมควรพลาดเด็ดขาดเลย

    ReplyDelete
  17. จะต้องสารภาพเลยว่าในประเทศไทย ซื้อหวยออนไลน์ หรือทั่วทั้งโลกนั้นนิยมกันมากมายอยู่แล้วในการเสี่ยงดวงเสี่ยงเลขเด็ด หากจะนับกิจกรรมที่คนภายในบ้านพวกเรานิยมทำเสมือนๆกันเยอะที่สุด เชื่อเป็นอย่างมากเลยว่าการเล่นสลากกินแบ่งจะเป็นเยี่ยมกิจกรรมอันดับแรกๆแม้กระนั้นถ้าเกิดผ่านมาหลายงวดแล้วยังไม่ตรงเป้า ก็ต้องการเสนอแนะให้ลองเปิดประสบการณ์ใหม่กับ หวยยี่กีวันนี้ ดูบ้าง เพราะว่าเป็นการพนันที่ได้โอกาสลุ้นโชคได้มากกว่าสลากกินแบ่งแบบธรรมดา แล้วหลังจากนั้นก็มีหลายๆคนที่บรรลุเป้าหมายจากการแทงหวยในรูปแบบนี้ด้วย คาสิโนออนไลน์มันดีจำพวกที่ว่าใครหลายๆคนไม่กลับไปเล่นลอตเตอรี่แบบเดิมอีกเลย
    ผลยี่กี วันนี้
    ส่วนจะมีจุดแข็งอะไรบ้างประเดี๋ยวพวกเรามาดูไปพร้อม

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. برخورداری از اقلیم مناسب، آب و هوای معتدل و نزدیکی به کوه های البرز در کنار ساخت و ساز های آپارتمان نشینی و همچنین ایجاد شهرک های صنعتی آن را تبدیل به موقعیت مناسبی برای زندگی کردن و همچنین کسب درآمد نموده است. از این رو در سال های اخیر شاهد رشد جمعیت و مهاجرت از شهرهای اطراف به خصوص تهران به این شهرستان پهناور می باشیم.
    فروش آپارتمان کرج

    ReplyDelete

  20. This blog is really awesome. I learned lots of informations in your blog. Keep posting like this...
    IELTS Coaching in Bangalore
    Best IELTS Coaching in Bangalore

    ReplyDelete
  21. tigerufa เว็บไซต์ตรง จ่ายจริง ไม่มีคดโกง ถูกเป็นล้าน จ่ายเป็นล้าน

    สมัคร tigerufa ถอนออก ถอนออกมาจากระบบ ด้วยระบบอัตโนมัติ ufabet88888 ที่สุดของบริการใหม่ ทำรายการได้ขอล…วยแจ้งข้าราชการ โอนฝากคอยไม่เกิน 30 วินาที

    แคชเข้าเกมส์ได้ได้เข้าเล่นโดยทันที เผาผลาญ… เร็วไว แล้วก็เร็วทันใจ โดยเฉพาะ กับ ท้า กล้าที่จะกล้า ยืนยันที่ตรง รับประกัน ซุปเปอร์ตรง tigerufa ท้ามากมาย ufabet สมัครตรงที่ตนเองจะตรงสามารถเปลี่ยนแปลงได้

    ReplyDelete
  22. เล่นสล็อตออนไลน์ที่ดีที่สุดในโลก ทั้งหมดในที่เดียวโดยไม่ต้องดาวน์โหลดที่ BK8 – ค้นพบเกมสล็อตที่น่าตื่นเต้นและน่าดึงดูดที่สุด เสริมด้วยกลไกที่ยอดเยี่ยม ภาพที่สวยงาม และมีโอกาสชนะรางวัลแจ็คพอตสุดพิเศษ!สมัคร bk8thai

    ReplyDelete
  23. One other word of caution: there is an abundance of automated website analysis services on the Internet. With few exceptions, we recommend that you avoid them. sport1 oslobodjenje ba

    ReplyDelete
  24. เราพร้อมให้บริการและคอยอัพเดทเกมใหม่ๆให้เล่นอยู่เสมอไม่ซ้ำ การสมัครเข้ามาได้ผ่านวิธีทางหน้าเว็บของเราโดยเราจะมีคณะทำงานรอคอยให้คำปรึกษาและก็ สล็อตเว็บตรง ช่วยเหลืออยู่ตลอด 24 ชั่วโมงไว้รอคอยให้บริการทุกคนอย่างเต็มเปี่ยม เข้ามาสนุกสนานแล้วหลังจากนั้นก็ทดลองเล่นได้อย่างสะดวกสบายไม่ว่าจะเป็นเกม สล็อตออนไลน์ เกมยิงปลาออนไลน์ เกมตากปลาออนไลน์

    ที่ทำให้คุณเล่นแล้วได้เงินจริง รองรับทุกเครื่องใช้ไม้สอยสำหรับในการเล่นแค่เพียงเข้ามาสมัครผ่านหน้าเว็บไซต์ สล็อต เว็บตรงไม่ผ่านเอเย่นต์ เกม สล็อต ของเราและจากนั้นก็ทำรายการโดยการกรอกข้อมูลแค่เพียง 3 นาที ก็ทำให้คุณได้เปิดประสบการณ์ใหม่ๆกับการเล่นเกม คาสิโนออนไลน์ ทุกแบบที่เราจัดการต้อนรับอย่างไม่มีขอบเขต

    ReplyDelete
  25. รีวิวDisneyplus LUCA ( ลูก้า ) เป็นภาพยนตร์แนวอนิเมชั่น 3 มิติที่นำเสนอเรื่องราวในแบบแฟนตาซีและก้าวข้ามผ่านช่วงวัย ( Fantasy and Coming of Age ) เป็นผลงานการผลิตโดย Pixar Animation Studios และดูแลการจัดจำหน่ายโดย ดูหนัง ภาพยนตร์อนิเมชั่นเรื่องนี้เป็นผลงานการกำกับโดย เอนรีโก้ คาซาโรซา กับการกำกับงานด้านอนิเมชั่นเรื่องยาวคั้งแรกหลังจากฝากผลงานไว้กับ La Luna อนิเมชั่นเรื่องสั้นที่ฉายปะหน้าอนิเมชั่นยาวอย่าง BRAVE เมื่อปี 2011 จนสามารถชนะใจผู้ชม จนสามารถเข้าชิงรางวัลอนิเมชั่นยอดเยี่ยมจากงารประกาศผลรางวัลออสการ์ ครั้งที่ 84 เมื่อปี 2012 เขียนบทโดย เจสซี แอนดรูวส์ และ ไมค์ โจนส์ โดยทั้งสองคนนี่้มีเครดิตที่น่าสนใจอย่างมาก โดยคนแรกอย่าง เจสซี แอนดรูวส์ เคยมีผลงานการดัดแปลงบทภาพยนตร์จาก ดูหนังออนไลน์ นิยายวัยรุ่นแนวดราม่าที่้เขาเป็นคนเขียนเอง เรื่อง Me and Earl and the Dying Girl ที่ได้รับคะแนนวิจารณ์อย่างมากมาย

    ReplyDelete
  26. Take a look and go.This is an impressive post. Come here and take a look at my information.
    electric masturbator cup
    electric masturbation cup

    ReplyDelete
  27. Searching for a career in cybersecurity? Look no further than Indian Cyber Security Solutions for Certified Ethical Hacking Training. Our training programme is created to provide you the theoretical understanding, hands-on expertise, and certification necessary to be successful in this highly demanded industry.

    Our training is meticulously crafted and taught by seasoned experts with a wealth of experience. You'll learn the latest techniques, tools, and methodologies used by professional ethical hackers while gaining hands-on experience through real-world scenarios. Sharpen your problem-solving abilities and unleash your potential as a certified ethical hacker.

    Join us
    today to embark on a transformative journey towards an exciting career in cybersecurity!

    ReplyDelete
  28. Unlock the secrets of Ethical Hackingwith Indian Cyber Security Solutions. Our comprehensive training program equips you with the knowledge and tools to safeguard against cyber threats and vulnerabilities.Join us today to become a skilled cybersecurity professional.

    ReplyDelete
  29. ค่าย pg ทางเข้า มือถือ ใหม่ล่าสุด ความสนุกสนานร่าเริงรวมทั้งตื่นเต้นที่สุดในทางเกมคาสิโนออนไลน์ PG ปากทางเข้าโทรศัพท์มือถือใหม่ปัจจุบัน! ในปัจจุบันที่เทคโนโลยีก้าวล้ำขึ้นอย่างเร็ว

    ReplyDelete
  30. Ready to embark on a career in cybersecurity? Join us Ethical hacking Training in Kolkatadesigned to empower you with the latest techniques and methodologies. Learn from seasoned professionals and gain practical experience to protect networks and data from cyber attacks.

    ReplyDelete

Post a Comment

Popular posts from this blog

CSRF enabled Ajax requests using Spring Security

Many of you who have worked on Spring Security might be aware of the fact that Spring Security protects applications from Cross Site Request Forgery using _csrf tokens in the request sent to the web server. You can find a detailed understanding in the Spring documentation page . The objective of this post is to explain how to send _csrf tokens in the Ajax requests when we protect our application URL and application access using spring security. How to get CSRF tokens While we submit a form using an application that is protected with Spring Security, the form gets a default hidden parameter in the form body when using <form:form> element. The param contains the _csrf tokens to authenticate the requests in the server. In case we use other ways to create forms, we have to manually include a hidden parameter that contains name as ${_csrf.parameterName} and  value as ${_csrf.token} . For example, <input type= "hidden" name= "${_csrf.parameterName}"

A wonderful technique to reduce website development cost

Websites - Good way to get online presence Websites are very vital to get online presence of any business nowadays. Websites are categorized into two different types. First one is Static Website and second one is Dynamic Website, normally known as web applications. Static websites are most widely used for any business since they help to bring up the online presence more easily and quickly. Depending on the content and features, static websites cost around $300-$700 . It includes web design and development. Apart from that, the business has to spend for hosting space and domain name for the website. Cloud based development is now more prevalent. Building a website and running it will be very easy and cheap using these cloud infrastructure. But the difficulty facing the development of static websites still looms high as it does not matter who provides the infrastructure. The development cost is still same. Technology - LAMP Static websites are developed using HTML and PHP mostly